@charset "UTF-8";
/**
 * 卸・販売店
 * URL : /business/accessory-retailer/
 * 移行元 : Elementor HTMLウィジェット 2箇所（2026-08-19 移行・統合）
 *
 * ------------------------------------------------------------------
 * 目次
 *   01. 共通設定
 *   02. 対象業態：アイコンボックス高さ調整
 *   04. 陳列イメージ：タブレットレイアウト調整
 *   05. 取扱商品：商品カードレイアウト・高さ調整
 *   06. 取引開始までの流れ
 *   07. 導入事例：ボタンまわり（〜1024px）
 *   08. 導入事例：ボタン幅調整（1025px〜）
 *   09. SP個別調整
 * ------------------------------------------------------------------
 *
 * 【編集時の注意】
 * ・07 と 08 は元々別々のHTMLウィジェットに分かれていました。
 *   記述順に依存している可能性があるため、順序を入れ替えないこと。
 * ・.elementor-container / .elementor-column / .elementor-widget-wrap を
 *   直接指定している箇所が多数あります。これはElementorの旧Section/Column
 *   構造に依存しているため、このページをコンテナ構造やV4（Atomic）で
 *   作り直す場合、このファイルはほぼ全面的に書き直しになります。
 * ・min-height の固定値（290px / 340px / 590px 等）でカード高さを揃えて
 *   います。テキスト量が変わると揃わなくなるため、いずれ flex/grid の
 *   stretch に置き換えるのが望ましい箇所です。
 * ------------------------------------------------------------------
 */


/* =========================================================
  01. 共通設定
========================================================= */

/* 既存CTA非表示 */
#cta {
  display: none;
}

/* PCでは br.sp-tab-br を無効化 */
@media (min-width: 1025px) {
  br.sp-tab-br {
    display: none;
  }
}


/* =========================================================
  02. 対象業態：アイコンボックス高さ調整
========================================================= */

/* PC：対象業態カードの高さを揃える */
@media (min-width: 1025px) {
  .business-industry-section .elementor-widget-icon-box > .elementor-widget-container {
    min-height: 290px;
    box-sizing: border-box;
  }
}

/* タブレット：対象業態カードの高さを揃える */
@media (min-width: 768px) and (max-width: 1024px) {
  .business-industry-section .elementor-widget-icon-box > .elementor-widget-container {
    min-height: 280px;
    box-sizing: border-box;
  }
}


/* =========================================================
  04. 陳列イメージ：タブレットレイアウト調整
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  /* 展開例 / 選ばれる理由 を上下にする */
  .display-main-layout > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .display-main-layout > .elementor-container > .elementor-column {
    width: 100% !important;
  }

  /* 選ばれる理由：4つを2×2にする */
  .display-reason-grid > .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .display-reason-grid .elementor-widget-icon-box {
    width: 100%;
    margin-bottom: 0 !important;
  }

  .display-reason-grid .elementor-widget-icon-box > .elementor-widget-container {
    min-height: 260px;
    box-sizing: border-box;
  }
}


/* =========================================================
  05. 取扱商品：商品カードレイアウト・高さ調整
========================================================= */

/* PC：商品カードの高さを揃える */
@media (min-width: 1025px) {
  .business-product-card {
    min-height: 340px;
    box-sizing: border-box;
  }
}

/* タブレット：商品カードの高さを揃える */
@media (min-width: 768px) and (max-width: 1024px) {
  .business-product-card {
    min-height: 590px;
    box-sizing: border-box;
  }
}

/* タブレット：商品カード内の画像＋テキストを上下にする */
@media (min-width: 768px) and (max-width: 1024px) {

  .business-product-inner > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .business-product-inner > .elementor-container > .elementor-column {
    width: 100% !important;
  }

  .business-product-inner .elementor-widget-image {
    margin-bottom: 20px;
  }
}

/* タブレット・スマホ：3商品を縦並びにする */
@media (max-width: 1024px) {

  .business-product-triple > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .business-product-triple > .elementor-container > .elementor-column {
    width: 100% !important;
  }
}

/* スマホ：商品カード自体も1列、カード内も上下にする */
@media (max-width: 767px) {

  .business-product-row > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .business-product-row > .elementor-container > .elementor-column {
    width: 100% !important;
  }

  .business-product-inner > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .business-product-inner > .elementor-container > .elementor-column {
    width: 100% !important;
  }

  .business-product-inner .elementor-widget-image {
    margin-bottom: 20px;
  }
}


/* =========================================================
  06. 取引開始までの流れ
========================================================= */

/* タブレット：4ブロックを2×2にする */
@media (min-width: 768px) and (max-width: 1024px) {

  .business-process-grid > .elementor-container {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 32px;
  }

  .business-process-grid > .elementor-container > .elementor-column {
    width: 50% !important;
    flex: 0 0 50% !important;
  }
}

/* スマホ：4ブロックを1×4にする */
@media (max-width: 767px) {

  .business-process-grid > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 32px;
  }

  .business-process-grid > .elementor-container > .elementor-column {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}


/* =========================================================
  07. 導入事例：ボタンまわり（〜1024px）
========================================================= */

@media (max-width: 1024px) {

  /* -------------------------
    共通：対象ボタンの幅・余白
  ------------------------- */
  .case-btn-grid-2x2 .elementor-widget-button,
  .case-btn-grid-2x2 .elementor-button-wrapper,
  .case-btn-grid-2x2 .elementor-button,
  .case-btn-grid-2plus1 .elementor-widget-button,
  .case-btn-grid-2plus1 .elementor-button-wrapper,
  .case-btn-grid-2plus1 .elementor-button,
  .case-btn-grid-keep .elementor-widget-button,
  .case-btn-grid-keep .elementor-button-wrapper,
  .case-btn-grid-keep .elementor-button,
  .case-btn-pair-vertical .elementor-widget-button,
  .case-btn-pair-vertical .elementor-button-wrapper,
  .case-btn-pair-vertical .elementor-button,
  .case-button-full,
  .case-button-full .elementor-button-wrapper,
  .case-button-full .elementor-button {
    width: 100%;
    box-sizing: border-box;
  }

  .case-btn-grid-2x2 .elementor-button,
  .case-btn-grid-2plus1 .elementor-button,
  .case-btn-grid-keep .elementor-button,
  .case-btn-pair-vertical .elementor-button,
  .case-button-full .elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  .case-btn-grid-2x2,
  .case-btn-grid-2plus1,
  .case-btn-grid-keep,
  .case-btn-pair-vertical {
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;
  }

  .case-btn-grid-2x2 .elementor-column,
  .case-btn-grid-2plus1 .elementor-column,
  .case-btn-grid-keep .elementor-column,
  .case-btn-pair-vertical .elementor-column,
  .case-btn-grid-2x2 .elementor-widget-wrap,
  .case-btn-grid-2plus1 .elementor-widget-wrap,
  .case-btn-grid-keep .elementor-widget-wrap,
  .case-btn-pair-vertical .elementor-widget-wrap,
  .case-btn-grid-2x2 .elementor-widget-button,
  .case-btn-grid-2plus1 .elementor-widget-button,
  .case-btn-grid-keep .elementor-widget-button,
  .case-btn-pair-vertical .elementor-widget-button,
  .case-button-full {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* -------------------------
    左上：4ボタンを2×2にする
  ------------------------- */
  .case-btn-grid-2x2 > .elementor-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  .case-btn-grid-2x2 > .elementor-container > .elementor-column {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    margin: 0 !important;
  }

  /* -------------------------
    右上：国内線 / 国際線は横並びのまま
  ------------------------- */
  .case-btn-grid-keep > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  .case-btn-grid-keep > .elementor-container > .elementor-column {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    margin: 0 !important;
  }

  /* -------------------------
    左下：3ボタンを2列＋下段1個にする
  ------------------------- */
  .case-btn-grid-2plus1 > .elementor-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }

  .case-btn-grid-2plus1 > .elementor-container > .elementor-column {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    margin: 0 !important;
  }

  /* -------------------------
    右下：PORTO / META VALLEYを縦並びにする
  ------------------------- */
  .case-btn-pair-vertical > .elementor-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .case-btn-pair-vertical > .elementor-container > .elementor-column {
    width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .case-btn-pair-vertical > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .case-button-full {
    margin-top: 8px !important;
  }

  /* -------------------------
    右下ボタンだけ幅を少し狭める
  ------------------------- */
  .case-btn-right-bottom .elementor-button,
  .case-btn-right-bottom.elementor-widget-button .elementor-button {
    width: 84% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .case-btn-right-bottom .elementor-button-wrapper,
  .case-btn-right-bottom.elementor-widget-button .elementor-button-wrapper {
    text-align: center;
  }
}


/* =========================================================
  08. 導入事例：ボタン幅調整（1025px〜）
  ※ここから下は2つ目のHTMLウィジェットにあった内容
========================================================= */

@media (min-width: 1025px) {

  /* 共通：ボタンの箱はカラム幅に収める */
  .case-btn-grid-2x2 .elementor-widget-button,
  .case-btn-grid-2plus1 .elementor-widget-button,
  .case-btn-grid-keep .elementor-widget-button,
  .case-btn-pair-vertical .elementor-widget-button,
  .case-button-full {
    width: 100%;
    box-sizing: border-box;
  }

  /* 左上4ボタン：4つ横並びなのでmin-widthは付けない */
  .case-btn-grid-2x2 .elementor-button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* 左下・右上・右下：こちらは少し広めでOK */
  .case-btn-grid-2plus1 .elementor-button,
  .case-btn-grid-keep .elementor-button,
  .case-btn-pair-vertical .elementor-button,
  .case-button-full .elementor-button {
    width: 96%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================================================
  09. SP個別調整
========================================================= */

/* スマホ：取引条件のアイコンリストだけ、左アイコンを非表示 */
@media (max-width: 767px) {

  .process-note-list .elementor-icon-list-icon {
    display: none !important;
  }

  .process-note-list .elementor-icon-list-text {
    padding-left: 0 !important;
  }
}

/* スマホだけ改行を消す */
@media (max-width: 767px) {
  br.pc-tab-br {
    display: none;
  }
}