/* ======================================================
 * [No.10-1] TAB: bike（車種管理UI）
 * - 絞り込み：メーカー + 表示区分 + 検索（q）
 * - 一括操作：表示区分/計算区分/加算/削除チェック（行選択に対して）
 * - まとめ追加（goo-bike）
 * - 表示区分（disp_key）= デフォ
 * - 計算区分（calc_key）= デフォで表示区分と同じ（例外だけ変更）
 * - キーは数字ID
 * - 削除チェック
 * - 適用→保存
 * ====================================================== */
if ($tab==='bike'){

  // --------- current filters (GET)
  $maker = sanitize_title($_GET['maker'] ?? 'honda');
  if (!isset($bikes['makers'][$maker])) $maker = array_key_first($bikes['makers']);

  $filter_disp = sanitize_title($_GET['disp'] ?? '');
  $q = sanitize_text_field($_GET['q'] ?? '');
  $q_lc = function_exists('mb_strtolower') ? mb_strtolower($q, 'UTF-8') : strtolower($q);

  $makerLabel = $bikes['makers'][$maker]['label'] ?? $maker;
  $models = $bikes['makers'][$maker]['models'] ?? array();

  // --------- server-side filtering
  $filteredModels = $models;

  if ($filter_disp!==''){
    $tmp = array();
    foreach($filteredModels as $id=>$row){
      $dk = sanitize_title($row['disp_key'] ?? '');
      if ($dk===$filter_disp) $tmp[$id]=$row;
    }
    $filteredModels = $tmp;
  }

  if ($q !== ''){
    $tmp = array();
    foreach($filteredModels as $id=>$row){
      $label = (string)($row['label'] ?? '');
      $label_lc = function_exists('mb_strtolower') ? mb_strtolower($label, 'UTF-8') : strtolower($label);
      if (strpos($label_lc, $q_lc) !== false) $tmp[$id]=$row;
    }
    $filteredModels = $tmp;
  }

  // --------- URL helpers（絞り込み維持）
  $baseUrl = admin_url('admin.php?page=mw-bike-one-v5&tab=bike');
  $urlMaker = function($mk) use ($baseUrl, $filter_disp, $q){
    $u = $baseUrl . '&maker=' . rawurlencode($mk);
    if ($filter_disp!=='') $u .= '&disp=' . rawurlencode($filter_disp);
    if ($q!=='') $u .= '&q=' . rawurlencode($q);
    return $u;
  };
  $urlDisp = function($disp) use ($baseUrl, $maker, $q){
    $u = $baseUrl . '&maker=' . rawurlencode($maker);
    if ($disp!=='') $u .= '&disp=' . rawurlencode($disp);
    if ($q!=='') $u .= '&q=' . rawurlencode($q);
    return $u;
  };
  $urlQuery = function($qq) use ($baseUrl, $maker, $filter_disp){
    $u = $baseUrl . '&maker=' . rawurlencode($maker);
    if ($filter_disp!=='') $u .= '&disp=' . rawurlencode($filter_disp);
    if ($qq!=='') $u .= '&q=' . rawurlencode($qq);
    return $u;
  };

  echo '<form method="post">';
  wp_nonce_field('mwb1_bike');

  echo '<h2>バイク（メーカー→車種）</h2>';

  // --------- filters row
  echo '<div style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:8px 0 14px;">';

  echo '<div>';
  echo '<div style="font-size:12px;color:#666;margin-bottom:4px;">メーカー</div>';
  echo '<select name="maker" onchange="location.href=\''.esc_js($baseUrl.'&maker=').'\'+this.value;';
  echo '">';
  foreach($bikes['makers'] as $mk=>$row){
    $sel = ($mk===$maker) ? 'selected' : '';
    echo '<option value="'.esc_attr($mk).'" '.$sel.'>'.esc_html($row['label'] ?? $mk).'（'.$mk.'）</option>';
  }
  echo '</select>';
  echo '<div style="margin-top:6px;"><a class="button button-small" href="'.esc_url($urlMaker($maker)).'">更新</a></div>';
  echo '</div>';

  echo '<div>';
  echo '<div style="font-size:12px;color:#666;margin-bottom:4px;">表示区分で絞り込み</div>';
  echo '<select onchange="location.href=\''.esc_js($baseUrl.'&maker='.$maker.'&disp=').'\'+this.value + (\'\');">';
  echo '<option value="">すべて</option>';
  foreach($cfg['dispClasses'] as $ck=>$cRow){
    $sel = ($ck===$filter_disp)?'selected':'';
    echo '<option value="'.esc_attr($ck).'" '.$sel.'>'.esc_html($cRow['label']).'（'.$ck.'）</option>';
  }
  echo '</select>';
  echo '<div style="margin-top:6px;"><a class="button button-small" href="'.esc_url($urlDisp($filter_disp)).'">更新</a></div>';
  echo '</div>';

  echo '<div style="min-width:260px;flex:1;">';
  echo '<div style="font-size:12px;color:#666;margin-bottom:4px;">検索（車種名）</div>';
  echo '<input type="text" id="mwb1-q" value="'.esc_attr($q).'" placeholder="例：Dio / NMAX / CBR" style="width:100%;">';
  echo '<div style="display:flex;gap:6px;margin-top:6px;">';
  echo '<a class="button button-small" id="mwb1-q-apply" href="'.esc_url($urlQuery($q)).'">検索</a>';
  echo '<a class="button button-small" href="'.esc_url($urlQuery('')).'">クリア</a>';
  echo '</div>';
  echo '</div>';

  echo '</div>';

  // --------- maker label
  echo '<p>メーカー表示名（任意）： <input name="maker_label" value="'.esc_attr($makerLabel).'" style="width:280px"></p>';

  echo '<p style="color:#666;">表示区分は区分マスター（排気量区分タブ）のラベルを使います。計算区分はデフォで表示区分と同じ。車格が大きい等の例外だけ計算区分を変えます。</p>';

  // --------- bulk controls (top)
  echo '<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa;margin:12px 0;">';
  echo '<strong>一括操作（チェックした行に反映）</strong>';

  echo '<button type="button" class="button" id="mwb1-select-all">全選択</button>';
  echo '<button type="button" class="button" id="mwb1-select-none">全解除</button>';

  echo '<span style="width:1px;height:22px;background:#ddd;display:inline-block;"></span>';

  // disp bulk
  echo '<span>表示区分：</span>';
  echo '<select id="mwb1-bulk-disp">';
  echo '<option value="">（変更しない）</option>';
  foreach($cfg['dispClasses'] as $ck=>$cRow){
    echo '<option value="'.esc_attr($ck).'">'.esc_html($cRow['label']).'（'.$ck.'）</option>';
  }
  echo '</select>';

  // calc bulk
  echo '<span>計算区分：</span>';
  echo '<select id="mwb1-bulk-calc">';
  echo '<option value="__nochange__">（変更しない）</option>';
  echo '<option value="">（表示区分と同じ）</option>';
  foreach($cfg['dispClasses'] as $ck=>$cRow){
    echo '<option value="'.esc_attr($ck).'">'.esc_html($cRow['label']).'（'.$ck.'）</option>';
  }
  echo '</select>';

  // adjust bulk
  echo '<span>車種別加算：</span>';
  echo '<input type="number" id="mwb1-bulk-adjust" step="1000" placeholder="（変更しない）" style="width:140px;text-align:right">';

  // delete bulk
  echo '<button type="button" class="button" id="mwb1-bulk-mark-delete" style="color:#b00;border-color:#d9a;">削除チェックON</button>';
  echo '<button type="button" class="button" id="mwb1-bulk-unmark-delete">削除チェックOFF</button>';

  // apply bulk
  echo '<button type="button" class="button button-primary" id="mwb1-bulk-apply">この内容をチェック行へ反映</button>';

  echo '<span style="color:#666;">→ 反映後に「適用（プレビュー）」または「保存」を押す</span>';
  echo '</div>';

  // --------- table
  echo '<table class="widefat striped" id="mwb1-bike-table"><thead><tr>';
  echo '<th style="width:70px;">選択</th>';
  echo '<th style="width:70px;">削除</th>';
  echo '<th style="width:80px;">ID</th>';
  echo '<th>車種名</th>';
  echo '<th style="width:180px;">表示区分</th>';
  echo '<th style="width:220px;">計算区分（例外のみ変更）</th>';
  echo '<th style="width:140px;">車種別加算</th>';
  echo '</tr></thead><tbody>';

  $i=0;
  foreach($filteredModels as $id=>$row){
    $label = $row['label'] ?? '';
    $disp_key = sanitize_title($row['disp_key'] ?? '');
    $calc_key = sanitize_title($row['calc_key'] ?? '');
    if ($calc_key==='') $calc_key = $disp_key;
    $adjust = intval($row['adjust'] ?? 0);

    echo '<tr class="mwb1-row">';
    echo '<td style="text-align:center"><input type="checkbox" class="mwb1-row-pick"></td>';
    echo '<td style="text-align:center"><input type="checkbox" name="model_del['.$i.']" value="1" class="mwb1-row-del"></td>';

    echo '<td><input name="model_id['.$i.']" value="'.esc_attr($id).'" style="width:80px" readonly></td>';
    echo '<td><input name="model_label['.$i.']" value="'.esc_attr($label).'" style="width:100%"></td>';

    echo '<td><select name="disp_key['.$i.']" class="mwb1-disp" style="width:100%;">';
    echo '<option value="">選択</option>';
    foreach($cfg['dispClasses'] as $ck=>$cRow){
      $sel = ($ck===$disp_key)?'selected':'';
      echo '<option value="'.esc_attr($ck).'" '.$sel.'>'.esc_html($cRow['label']).'（'.$ck.'）</option>';
    }
    echo '</select></td>';

    echo '<td><select name="calc_key['.$i.']" class="mwb1-calc" style="width:100%;">';
    echo '<option value="">（表示区分と同じ）</option>';
    foreach($cfg['dispClasses'] as $ck=>$cRow){
      $sel = ($ck===$calc_key)?'selected':'';
      echo '<option value="'.esc_attr($ck).'" '.$sel.'>'.esc_html($cRow['label']).'（'.$ck.'）</option>';
    }
    echo '</select></td>';

    echo '<td><input type="number" step="1000" name="model_adjust['.$i.']" value="'.esc_attr($adjust).'" class="mwb1-adjust" style="width:140px;text-align:right"></td>';
    echo '</tr>';

    $i++;
  }

  // 新規追加枠（2行）
  for($j=0;$j<2;$j++,$i++){
    echo '<tr class="mwb1-row mwb1-new">';
    echo '<td style="text-align:center"><input type="checkbox" class="mwb1-row-pick"></td>';
    echo '<td></td>';
    echo '<td><input name="model_id['.$i.']" value="" placeholder="（自動）" style="width:80px" readonly></td>';
    echo '<td><input name="model_label['.$i.']" placeholder="例：Ｄｉｏ チェスタ" style="width:100%"></td>';

    echo '<td><select name="disp_key['.$i.']" class="mwb1-disp" style="width:100%;">';
    echo '<option value="">選択</option>';
    foreach($cfg['dispClasses'] as $ck=>$cRow){
      echo '<option value="'.esc_attr($ck).'">'.esc_html($cRow['label']).'（'.$ck.'）</option>';
    }
    echo '</select></td>';

    echo '<td><select name="calc_key['.$i.']" class="mwb1-calc" style="width:100%;">';
    echo '<option value="">（表示区分と同じ）</option>';
    foreach($cfg['dispClasses'] as $ck=>$cRow){
      echo '<option value="'.esc_attr($ck).'">'.esc_html($cRow['label']).'（'.$ck.'）</option>';
    }
    echo '</select></td>';

    echo '<td><input type="number" step="1000" name="model_adjust['.$i.']" value="0" class="mwb1-adjust" style="width:140px;text-align:right"></td>';
    echo '</tr>';
  }

  echo '</tbody></table>';

  // --------- apply/save buttons (bottom too)
  echo '<p style="display:flex;gap:8px;align-items:center;margin-top:14px;">';
  echo '<button class="button" name="bike_action" value="apply">適用（プレビュー）</button>';
  echo '<button class="button button-primary" name="bike_action" value="save">保存（bikes.json）</button>';
  echo '<span style="color:#666;">※ 保存前に内容を確認したい場合は「適用（プレビュー）」を押してください。</span>';
  echo '</p>';

  // --------- bulk add (goo-bike)
  echo '<hr style="margin:18px 0;">';
  echo '<h3>goo-bike貼り付けで「車種をまとめて追加」（同名は上書き）</h3>';
  echo '<p style="color:#666;">goo-bikeの「車種名(件数)」形式をそのまま貼ってOK。抽出は(数字)を目印にしています。</p>';

  echo '<p>初期値：表示区分（=デフォ） ';
  echo '<select name="default_disp_key">';
  echo '<option value="">選択</option>';
  foreach($cfg['dispClasses'] as $ck=>$cRow){
    echo '<option value="'.esc_attr($ck).'">'.esc_html($cRow['label']).'（'.$ck.'）</option>';
  }
  echo '</select> ';
  echo '車種別加算 <input type="number" step="1000" name="default_adjust" value="0" style="width:120px;text-align:right">円</p>';

  echo '<p><textarea name="bulk_goobike" rows="6" style="width:100%;" placeholder="ここにgoo-bikeの文字列を貼る"></textarea></p>';

  echo '<p style="display:flex;gap:8px;align-items:center;">';
  echo '<button class="button" name="bike_action" value="apply">適用（プレビュー）</button>';
  echo '<button class="button button-primary" name="bike_action" value="save">保存（bikes.json）</button>';
  echo '</p>';

  echo '</form>';

  echo '<hr><p style="color:#666;">bikes.json 保存先：<code>'.esc_html(mwb1_bike_json_path()).'</code></p>';

  // --------- JS: bulk operations (client-side)
  echo '<script>
  (function(){
    function qs(sel, ctx){ return (ctx||document).querySelector(sel); }
    function qsa(sel, ctx){ return Array.prototype.slice.call((ctx||document).querySelectorAll(sel)); }

    const table = qs("#mwb1-bike-table");
    if(!table) return;

    const btnAll   = qs("#mwb1-select-all");
    const btnNone  = qs("#mwb1-select-none");
    const btnMarkD = qs("#mwb1-bulk-mark-delete");
    const btnUnmkD = qs("#mwb1-bulk-unmark-delete");
    const btnApply = qs("#mwb1-bulk-apply");

    const bulkDisp = qs("#mwb1-bulk-disp");
    const bulkCalc = qs("#mwb1-bulk-calc");
    const bulkAdj  = qs("#mwb1-bulk-adjust");

    function rows(){ return qsa("tbody tr.mwb1-row", table); }

    function pickedRows(){
      return rows().filter(function(tr){
        const pick = qs(".mwb1-row-pick", tr);
        return pick && pick.checked;
      });
    }

    function setPicked(flag){
      rows().forEach(function(tr){
        const pick = qs(".mwb1-row-pick", tr);
        if(pick) pick.checked = !!flag;
      });
    }

    btnAll && btnAll.addEventListener("click", function(e){ e.preventDefault(); setPicked(true); });
    btnNone && btnNone.addEventListener("click", function(e){ e.preventDefault(); setPicked(false); });

    btnMarkD && btnMarkD.addEventListener("click", function(e){
      e.preventDefault();
      pickedRows().forEach(function(tr){
        const del = qs(".mwb1-row-del", tr);
        if(del) del.checked = true;
      });
    });

    btnUnmkD && btnUnmkD.addEventListener("click", function(e){
      e.preventDefault();
      pickedRows().forEach(function(tr){
        const del = qs(".mwb1-row-del", tr);
        if(del) del.checked = false;
      });
    });

    btnApply && btnApply.addEventListener("click", function(e){
      e.preventDefault();

      const dispVal = bulkDisp ? bulkDisp.value : "";
      const calcVal = bulkCalc ? bulkCalc.value : "__nochange__";
      const adjVal  = bulkAdj ? bulkAdj.value : "";

      const targets = pickedRows();
      if(!targets.length){
        alert("一括反映する行をチェック（選択）してください。");
        return;
      }

      targets.forEach(function(tr){
        const dispSel = qs(".mwb1-disp", tr);
        const calcSel = qs(".mwb1-calc", tr);
        const adjInp  = qs(".mwb1-adjust", tr);

        // 表示区分：指定があれば反映
        if(dispSel && dispVal !== ""){
          dispSel.value = dispVal;

          // 計算区分が「変更しない」以外で、空（表示と同じ）ならそのまま維持
          // ただし calc を空にする指定がある場合は空にする
          if(calcSel && (calcVal === "")) calcSel.value = "";
          // 計算区分を明示指定した場合は反映
          if(calcSel && (calcVal !== "__nochange__" && calcVal !== "")) calcSel.value = calcVal;
        } else {
          // 表示区分を変えない場合でも calc/adj は反映できる
          if(calcSel && (calcVal === "")) calcSel.value = "";
          if(calcSel && (calcVal !== "__nochange__" && calcVal !== "")) calcSel.value = calcVal;
        }

        // 加算：入力があれば反映
        if(adjInp && adjVal !== ""){
          adjInp.value = adjVal;
        }
      });

      alert("チェック行へ一括反映しました。続けて「適用（プレビュー）」または「保存」を押してください。");
    });

    // 検索ボタン：入力値をURLへ
    const qInput = qs("#mwb1-q");
    const qBtn = qs("#mwb1-q-apply");
    if(qInput && qBtn){
      qInput.addEventListener("keydown", function(ev){
        if(ev.key === "Enter"){
          ev.preventDefault();
          qBtn.click();
        }
      });
      qInput.addEventListener("input", function(){
        // href更新（ページ遷移のためのリンク）
        const val = qInput.value || "";
        const base = qBtn.getAttribute("href") || "";
        // いったん現在URLを再構成（PHP側の urlQuery を使ってるので、ここは軽く置換）
        // 末尾の &q= を探して入れ替える（無ければ追加）
        let href = base;
        if(href.indexOf("&q=") !== -1){
          href = href.replace(/&q=[^&]*/g, "&q=" + encodeURIComponent(val));
        }else{
          href = href + "&q=" + encodeURIComponent(val);
        }
        qBtn.setAttribute("href", href);
      });
    }

  })();
  </script>';
}<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>バイク輸送の窓口｜バイク輸送.com</title>
<meta name='robots' content='max-image-preview:large' />
<link rel="alternate" type="application/rss+xml" title="バイク輸送の窓口｜バイク輸送.com &raquo; フィード" href="https://bike-yusou.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="バイク輸送の窓口｜バイク輸送.com &raquo; コメントフィード" href="https://bike-yusou.com/comments/feed/" />
<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://bike-yusou.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fbike-yusou.com%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://bike-yusou.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fbike-yusou.com%2F&#038;format=xml" />
<style id='wp-img-auto-sizes-contain-inline-css' type='text/css'>
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<style id='wp-emoji-styles-inline-css' type='text/css'>

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */
</style>
<style id='wp-block-library-inline-css' type='text/css'>
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
/* VK Color Palettes */:root{ --vk-color-primary:#337ab7}:root .has-vk-color-primary-color { color:var(--vk-color-primary); }:root .has-vk-color-primary-background-color { background-color:var(--vk-color-primary); }:root{ --vk-color-primary-dark:#296292}:root .has-vk-color-primary-dark-color { color:var(--vk-color-primary-dark); }:root .has-vk-color-primary-dark-background-color { background-color:var(--vk-color-primary-dark); }:root{ --vk-color-primary-vivid:#3886c9}:root .has-vk-color-primary-vivid-color { color:var(--vk-color-primary-vivid); }:root .has-vk-color-primary-vivid-background-color { background-color:var(--vk-color-primary-vivid); }

/*# sourceURL=wp-block-library-inline-css */
</style><style id='wp-block-paragraph-inline-css' type='text/css'>
.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}
/*# sourceURL=https://bike-yusou.com/wp-includes/blocks/paragraph/style.min.css */
</style>
<style id='global-styles-inline-css' type='text/css'>
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--gradient--vivid-green-cyan-to-vivid-cyan-blue: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);--wp--preset--font-size--small: 0.875rem;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 1.5rem;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--regular: 1rem;--wp--preset--font-size--huge: 2.25rem;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: var(--vk-margin-xs, 0.75rem);--wp--preset--spacing--40: var(--vk-margin-sm, 1.5rem);--wp--preset--spacing--50: var(--vk-margin-md, 2.4rem);--wp--preset--spacing--60: var(--vk-margin-lg, 4rem);--wp--preset--spacing--70: var(--vk-margin-xl, 6rem);--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:root { --wp--style--global--content-size: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 );--wp--style--global--wide-size: calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 + ( 100vw - ( var(--vk-width-container) - var(--vk-width-container-padding) * 2 ) ) / 2 ); }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 24px; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}a:where(:not(.wp-element-button)){text-decoration: underline;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background: var(--wp--preset--gradient--vivid-green-cyan-to-vivid-cyan-blue) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-regular-font-size{font-size: var(--wp--preset--font-size--regular) !important;}.has-huge-font-size{font-size: var(--wp--preset--font-size--huge) !important;}
/*# sourceURL=global-styles-inline-css */
</style>

<link rel='stylesheet' id='lightning-common-style-css' href='https://bike-yusou.com/wp-content/themes/lightning/_g3/assets/css/style-theme-json.css?ver=15.30.1' type='text/css' media='all' />
<style id='lightning-common-style-inline-css' type='text/css'>
/* Lightning */:root {--vk-color-primary:#337ab7;--vk-color-primary-dark:#296292;--vk-color-primary-vivid:#3886c9;--g_nav_main_acc_icon_open_url:url(https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-acc-icon-open-black.svg);--g_nav_main_acc_icon_close_url: url(https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-close-black.svg);--g_nav_sub_acc_icon_open_url: url(https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-acc-icon-open-white.svg);--g_nav_sub_acc_icon_close_url: url(https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-close-white.svg);}
:root{--swiper-navigation-color: #fff;}
html{scroll-padding-top:var(--vk-size-admin-bar);}
/* vk-mobile-nav */:root {--vk-mobile-nav-menu-btn-bg-src: url("https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg");--vk-mobile-nav-menu-btn-close-bg-src: url("https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-close-black.svg");--vk-menu-acc-icon-open-black-bg-src: url("https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-acc-icon-open-black.svg");--vk-menu-acc-icon-open-white-bg-src: url("https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-acc-icon-open-white.svg");--vk-menu-acc-icon-close-black-bg-src: url("https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-close-black.svg");--vk-menu-acc-icon-close-white-bg-src: url("https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-close-white.svg");}
/*# sourceURL=lightning-common-style-inline-css */
</style>
<link rel='stylesheet' id='lightning-design-style-css' href='https://bike-yusou.com/wp-content/themes/lightning/_g3/design-skin/origin3/css/style.css?ver=15.30.1' type='text/css' media='all' />
<style id='lightning-design-style-inline-css' type='text/css'>
.tagcloud a:before { font-family: "Font Awesome 5 Free";content: "\f02b";font-weight: bold; }
/*# sourceURL=lightning-design-style-inline-css */
</style>
<link rel='stylesheet' id='vk-swiper-style-css' href='https://bike-yusou.com/wp-content/themes/lightning/vendor/vektor-inc/vk-swiper/src/assets/css/swiper-bundle.min.css?ver=11.0.2' type='text/css' media='all' />
<link rel='stylesheet' id='vk-blog-card-css' href='https://bike-yusou.com/wp-content/themes/lightning/_g3/inc/vk-wp-oembed-blog-card/package/css/blog-card.css?ver=6.9' type='text/css' media='all' />
<link rel='stylesheet' id='lightning-theme-style-css' href='https://bike-yusou.com/wp-content/themes/lightning-child/style.css?ver=15.30.1' type='text/css' media='all' />
<link rel='stylesheet' id='vk-font-awesome-css' href='https://bike-yusou.com/wp-content/themes/lightning/vendor/vektor-inc/font-awesome-versions/src/versions/6/css/all.min.css?ver=6.4.2' type='text/css' media='all' />
<link rel="https://api.w.org/" href="https://bike-yusou.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://bike-yusou.com/wp-json/wp/v2/pages/17" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://bike-yusou.com/xmlrpc.php?rsd" />
<meta name="generator" content="WordPress 6.9" />
<link rel="canonical" href="https://bike-yusou.com/" />
<link rel='shortlink' href='https://bike-yusou.com/' />
		<style type="text/css" id="wp-custom-css">
			/* =========================
   フォント（SCENE / GUIDE 用欧文）
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&display=swap');


/* =========================
   SCENE / PICK UP セクション（スライダー）
   ========================= */

/* セクション全体（背景フル幅） */
.by-pickup {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 56px 0 64px;
  background: #e5eff8;
  font-family: 'ヒラギノ角ゴ ProN', 'Meiryo', 'メイリオ', sans-serif;
}

/* 見出し（PC基準） */
.by-pickup-header {
  max-width: 960px;
  margin: 0 auto 10px;  /* ← 下の余白を詰めた */
  padding: 0 16px;
  text-align: center;
}

/* SCENE / GUIDE 共通 英字見出し */
.by-label-main {
  margin: 0 0 4px;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #32475e;
  font-style: italic;
  font-family: 'Montserrat', sans-serif !important;
}

/* SCENE / GUIDE 共通 日本語見出し */
.by-label-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #d63a7f;
  font-style: italic;
}

/* 見出し下の補足（マッチングの実績） */
.by-pickup-note {
  max-width: 960px;
  margin: 0 auto 18px;  /* ← 28px から少し詰める */
  padding: 0 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: #32475e;
}

/* 1行目：ラベル風「マッチングの実績」 */
.by-pickup-note-main {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
}

/* 2行目：説明文 */
.by-pickup-note-sub {
  display: block;
  font-size: 13px;
  color: #6a7891;
}

/* スライダー共通（PC基準） */
.by-slider {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.by-window {
  overflow: hidden;
  flex: 1;
}

.by-track {
  display: flex;
  gap: 0;
  transition: transform 0.35s ease;
  list-style: none;
}

/* スライド（PC＝5列・タブレット3列・スマホ1列） */
.by-slide {
  flex: 0 0 20%;           /* PCで5個見える */
  max-width: 20%;
  padding: 0 8px;
  box-sizing: border-box;
}

/* カード本体（PICK UP 用：写真なし・小さめカード） */
.by-card {
  box-sizing: border-box;
  width: 100%;
  border: 3px solid #32475e;
  border-radius: 4px;
  background: #ffffff;
  padding: 14px 10px;
  text-align: center;
  text-decoration: none;
  color: #234066;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* 画像用の枠（画像を使う場合用。写真なしならDOMになければOK） */
.by-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
}

.by-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトルテキスト（2行で省略・通常カード用） */
.by-caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: #234066;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* 2行で省略 */
  -webkit-box-orient: vertical;
}

/* 矢印ボタン（左右端に重ねる） */
.by-arrow {
  border: none;
  background: #fff;
  color: #d62f7f;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

/* 前／次矢印の位置 */
.by-arrow.-prev,
.by-arrow-prev,
.by-arrow--prev {
  left: 16px;
}

.by-arrow.-next,
.by-arrow-next,
.by-arrow--next {
  right: 16px;
}

/* ドット（中央＆まんまる） */
.by-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 18px auto 0;
  padding: 0;
  width: 100%;
}

.by-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #c9d3e4;
  display: inline-block;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.by-dot.is-active {
  background: #f0599b;
}

/* スマホ（〜767px） */
@media (max-width: 767px) {

  .by-pickup {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 40px 0 48px;
    padding-left: 0;
    padding-right: 0;
  }

  .by-pickup-header {
    max-width: 100%;
    margin: 0 auto 6px;   /* ← PCよりさらに詰める */
    padding: 0 12px;
  }

  .by-pickup-note {
    margin-bottom: 12px;  /* ← 22px → 12px に */
    font-size: 13px;
  }

  .by-pickup-note-main {
    font-size: 15px;
    letter-spacing: 0.12em;
  }

  .by-pickup-note-sub {
    font-size: 12px;
  }

  .by-label-main {
    font-size: 32px;
  }

  .by-label-sub {
    font-size: 15px;
    letter-spacing: 0.06em;
  }

  .by-slider {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 16px;
  }

  .by-card {
    min-height: 72px;
    padding: 12px 12px;
  }

  .by-caption {
    font-size: 15px;
  }

  .by-arrow {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .by-arrow.-prev,
  .by-arrow-prev,
  .by-arrow--prev {
    left: 8px;
  }

  .by-arrow.-next,
  .by-arrow-next,
  .by-arrow--next {
    right: 8px;
  }
}

/* タブレット（〜1024px：3列） */
@media (max-width: 1024px) {
  .by-slide {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* スマホ（〜640px：1列） */
@media (max-width: 640px) {
  .by-slide {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* =========================
   フッター表記 非表示
   ========================= */
.site-footer-copyright,
.site-footer-poweredby {
  display: none !important;
}


/* =========================
   GUIDE セクション
   ========================= */

/* セクション全体（背景フル幅） */
.by-guide {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 56px 0 72px;
  background: #e5eff8;
  font-family: 'ヒラギノ角ゴ ProN', 'Meiryo', 'メイリオ', sans-serif;
}

/* ▼モバイル基準：縦並び */
.by-guide-grid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* 各カード */
.by-guide-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  min-height: 200px;
  padding: 28px 16px 24px;
  border: 3px solid #32475e;
  background: #ffffff;
  text-align: center;
  text-decoration: none;
  color: #234066;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.by-guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* アイコン */
.by-guide-icon {
  margin-bottom: 18px;
}

.by-guide-icon img {
  width: 72px;
  height: auto;
  display: block;
}

/* テキスト */
.by-guide-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #d63a7f;
}

/* PC（768px〜）：5つ横並び固定 */
@media (min-width: 768px) {

  .by-guide {
    padding: 56px 0 72px;
  }

  .by-guide-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    justify-items: center;
    align-items: stretch;
  }

  .by-guide-card {
    max-width: 200px;
    width: 100%;
  }
}


/* =========================
   記事レイアウト（バイク輸送とは？ 本文側）
   ========================= */

.by-article {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  font-family: 'ヒラギノ角ゴ ProN', 'Meiryo', 'メイリオ', sans-serif;
  color: #222;
  line-height: 1.8;
}

/* タイトル */
.by-article-header {
  margin-bottom: 16px;
}

.by-article-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

/* アイキャッチ */
.by-article-thumb {
  margin: 16px 0 32px;
}

.by-article-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* 目次 */
.by-toc {
  border: 2px solid #2f527a;
  padding: 20px 20px 16px;
  margin: 0 0 32px;
  background: #f9fbff;
}

.by-toc-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
}

/* テーマ側の装飾ラインを打ち消し */
.by-toc-title::before {
  content: none !important;
}

.by-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.by-toc-list li {
  margin: 8px 0;
  padding-left: 1.5em;
  position: relative;
}

.by-toc-list li::before {
  content: "―";
  position: absolute;
  left: 0;
  top: 0;
  color: #2f527a;
}

.by-toc-list a {
  text-decoration: none;
  color: #2f72c0;
}

.by-toc-list a:hover {
  text-decoration: underline;
}

/* 導入文 */
.by-intro {
  margin-bottom: 32px;
}

/* 大タイトル（H2） */
.by-section {
  margin: 40px 0 32px;
}

.by-section-heading {
  background: #2f527a;
  color: #fff;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
  border: none;
}

/* 小タイトル（H3） */
.by-subheading {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 12px;
  padding: 8px 0;
  border-top: 1px dashed #ccd3e0;
  border-bottom: 1px dashed #ccd3e0;
}

/* テーマ側の青い一本線を打ち消し */
.by-subheading::before {
  content: none !important;
}

/* ステップリスト */
.by-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.by-step-list li {
  margin-bottom: 20px;
}

/* FAQ */
.by-faq-item + .by-faq-item {
  margin-top: 16px;
}

/* 関連記事ボックス */
.by-related {
  margin-top: 40px;
}

.by-related-inner {
  border: 1px solid #ffd9a6;
  background: #fffaf3;
  padding: 16px 20px;
  border-radius: 4px;
}

.by-related-label {
  margin: 0 0 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.by-related-icon {
  font-size: 18px;
}

.by-related-link {
  color: #2f72c0;
  text-decoration: none;
  font-weight: 600;
}

.by-related-link:hover {
  text-decoration: underline;
}

/* スマホ調整（記事本文） */
@media (max-width: 600px) {
  .by-article-title {
    font-size: 22px;
  }

  .by-section-heading {
    font-size: 18px;
  }

  .by-subheading {
    font-size: 16px;
  }
}


/* =========================
   コメント・メタ情報・パンくず 非表示
   ========================= */

/* コメント関連 */
#comments,
.comments-area,
.comment-respond,
#respond,
#commentform,
.comment-form,
.wp-block-comments,
.wp-block-post-comments,
.wp-block-post-comments-form {
  display: none !important;
}

/* 投稿日・著者などのメタ情報 */
.entry-header .entry-meta,
.entry-meta,
.post-meta,
.single-post .posted-on,
.single-post .updated-on,
.single-post .byline,
.author,
.posted-by {
  display: none !important;
}

/* テーマ元のタイトルバー＆パンくず */
.archive .page-header,
.archive header.page-header,
.category .page-header,
.tag .page-header,
.archive .archive-header,
.archive-header,
.page-header,
.single .entry-header,
.single-post .entry-header,
.single .entry-title,
.single-post .entry-title,
.single h1.entry-title,
.single-post h1.entry-title,
nav.breadcrumb,
#breadcrumb,
.breadcrumbs,
.breadcrumb,
.bread_crumb,
.p-breadcrumb,
.l-breadcrumb {
  display: none !important;
}


/* =========================
   ARTICLE 一覧セクション
   ========================= */

/* セクション全体（背景フル幅・白） */
.by-article-list {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 56px 0 64px;
  background: #ffffff;  /* ARTICLE は白背景 */
  font-family: 'ヒラギノ角ゴ ProN', 'Meiryo', 'メイリオ', sans-serif;
}

/* 見出し（GUIDEと同じバランスに揃える） */
.by-article-list-header {
  max-width: 960px;
  margin: 0 auto 20px;   /* GUIDE と同じ余白 */
  padding: 0 16px;
  text-align: center;
}

/* 英字見出しは共通 .by-label-main をそのまま利用 */
.by-article-list-header .by-label-main {
  margin: 0 0 4px;       /* GUIDE と同じ */
}

/* カード本体 */
.by-article-list-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 3px solid #32475e !important;  /* GUIDEと同じ太さに統一 */
  background: #ffffff;
  padding: 16px;
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* サムネイル（正方形） */
.by-article-list-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 12px;
  background: #eef1f7;
}

.by-article-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトル */
.by-article-list-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: #1a2840;
}

/* ホバー時の動き */
.by-article-list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: #c5d3ea;
}

/* グリッド：基本は1列（スマホ） */
.by-article-list-grid {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;   /* スマホは1つずつ */
  gap: 24px;
}

/* タブレット（768px〜）：2列 */
@media (min-width: 768px) {
  .by-article-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC（1024px〜）：3列 */
@media (min-width: 1024px) {
  .by-article-list-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =========================
   マッチング用カード（PICKUPスライダー内）
   ========================= */

/* カード全体：縦並び＆左寄せ（マッチング用スライダーだけ） */
.by-pickup .by-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
}

/* キャプションブロック全体（メーカー＋車種＋引取先など） */
.by-pickup .by-caption.by-match {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  padding: 12px 18px;
  text-align: left;
}

/* 上の「メーカー＋車種」ブロック */
.by-match-title {
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* メーカー（小さめ） */
.by-match-maker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b7b93;
}

/* 車種名（大きめ・左寄せ） */
.by-match-vehicle {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #234066;
}

/* 下の一覧（引取先・配達先など） */
.by-match-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}

.by-match-meta li {
  display: flex;
  gap: 6px;
}

/* ラベル部分（引取先 / 配達先 / タイプ / 料金） */
.by-match-label {
  min-width: 4.5em;   /* 「引取先」「配達先」などの幅を揃える */
  font-weight: 700;
}

/* 値部分 */
.by-match-value {
  flex: 1;
}

/* スマホ時は少しだけ縮小 */
@media (max-width: 767px) {
  .by-match-maker {
    font-size: 10px;
  }

  .by-match-vehicle {
    font-size: 16px;
  }
}		</style>
		<link rel='stylesheet' id='add_google_fonts_Lato-css' href='//fonts.googleapis.com/css2?family=Lato%3Awght%40400%3B700&#038;display=swap&#038;subset=japanese&#038;ver=15.30.1' type='text/css' media='all' />
<link rel='stylesheet' id='add_google_fonts_noto_sans-css' href='//fonts.googleapis.com/css2?family=Noto+Sans+JP%3Awght%40400%3B700&#038;display=swap&#038;subset=japanese&#038;ver=15.30.1' type='text/css' media='all' />
</head>
<body class="home wp-singular page-template-default page page-id-17 wp-embed-responsive wp-theme-lightning wp-child-theme-lightning-child device-pc fa_v6_css">
<a class="skip-link screen-reader-text" href="#main">コンテンツへスキップ</a>
<a class="skip-link screen-reader-text" href="#vk-mobile-nav">ナビゲーションに移動</a>

<header id="site-header" class="site-header site-header--layout--nav-float">
		<div id="site-header-container" class="site-header-container container">

				<h1 class="site-header-logo">
		<a href="https://bike-yusou.com/">
			<span><img src="http://bike-yusou.com/wp-content/uploads/2025/12/Futura.png" alt="バイク輸送の窓口｜バイク輸送.com" /></span>
		</a>
		</h1>

		
			</div>
	</header>




<div class="site-body">
		<div class="site-body-container container">

		<div class="main-section" id="main" role="main">
			
			<div id="post-17" class="entry entry-full post-17 page type-page status-publish hentry">

	
	
	
	<div class="entry-body">
				
<!-- =========================
     PICK UP（SEARCH）スライダー
     ========================= -->
<section class="by-pickup" id="pickup">
  <div class="by-pickup-header">
    <p class="by-label-main">SEARCH</p>
    <p class="by-label-sub">業者を探す</p>
  </div>

  <!-- ▼ マッチングの実績（説明ブロック） -->
  <div class="by-pickup-note">
    <span class="by-pickup-note-main">マッチングの実績</span>
    <span class="by-pickup-note-sub">当サービスでマッチングしたバイク輸送事例の一部です</span>
  </div>
  <!-- ▲ ここまで -->

  <div class="by-slider">
    <!-- 矢印：前へ -->
    <button class="by-arrow by-prev" type="button">&#10094;</button>

    <div class="by-window">
      <ul class="by-track">

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">ヤマハ</span>
                                <span class="by-match-vehicle">XJR400R</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">千葉県いすみ市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">岡山県赤穂市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">30,000円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">ハーレーダビッドソン</span>
                                <span class="by-match-vehicle">FXDBストリートボブ</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">香川県丸亀市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">山口県防府市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">29,000円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">カワサキ</span>
                                <span class="by-match-vehicle">W650</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">京都府京田辺市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">熊本県荒尾市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">19,500円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">ホンダ</span>
                                <span class="by-match-vehicle">DIO</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">大阪府岸和田市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">福岡県糸島市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">17,000円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">トライアンフ</span>
                                <span class="by-match-vehicle">T140ボンネビル</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">新潟県十日町市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">和歌山県海南市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">35,500円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">ホンダ</span>
                                <span class="by-match-vehicle">ジャイロキャノピー</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">広島県広島市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">鹿児島県姶良市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">69,000円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">カワサキ</span>
                                <span class="by-match-vehicle">GT380</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">石川県金沢市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">宮崎県えびの市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">36,000円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">ヤマハ</span>
                                <span class="by-match-vehicle">マジェスティ250</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">青森県青森市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">富山県滑川市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">37,000円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

<li class="by-slide">
  <div class="by-card">
    <div class="by-caption by-match">
              <div class="by-match-title">
                      <span class="by-match-maker">スズキ</span>
                                <span class="by-match-vehicle">GSR250</span>
                  </div>
      
      <ul class="by-match-meta">
                  <li>
            <span class="by-match-label">引取先</span>
            <span class="by-match-value">茨城県つくば市</span>
          </li>
                          <li>
            <span class="by-match-label">配達先</span>
            <span class="by-match-value">兵庫県明石市</span>
          </li>
                          <li>
            <span class="by-match-label">タイプ</span>
            <span class="by-match-value">ドアtoドア</span>
          </li>
                          <li>
            <span class="by-match-label">料金</span>
            <span class="by-match-value">31,000円</span>
          </li>
              </ul>
    </div>
  </div>
</li>

      </ul>
    </div>

    <!-- 矢印：次へ -->
    <button class="by-arrow by-next" type="button">&#10095;</button>
  </div>

  <!-- ドットナビゲーション -->
  <div class="by-dots"></div>
</section>

<!-- =========================
     スライダー用スクリプト
     ========================= -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  const slider   = document.querySelector('.by-slider');
  if (!slider) return;

  const windowEl = slider.querySelector('.by-window');
  const track    = slider.querySelector('.by-track');
  const prevBtn  = slider.querySelector('.by-prev');
  const nextBtn  = slider.querySelector('.by-next');
  const dotsWrap = document.querySelector('.by-dots');

  let slides = Array.from(track.children);
  const originalCount = slides.length;

  if (originalCount <= 1) return; // 1枚だけなら何もしない

  // ===== 端にクローンを置いて無限ループ化 =====
  const firstClone = slides[0].cloneNode(true);
  const lastClone  = slides[slides.length - 1].cloneNode(true);
  track.appendChild(firstClone);              // 右端に「最初」のクローン
  track.insertBefore(lastClone, slides[0]);   // 左端に「最後」のクローン

  slides = Array.from(track.children);        // クローン込みで取り直す

  // 実スライド1枚目（=配列上 1 番目）からスタート
  let index = 1;
  let isAnimating = false;

  // -------------------------
  // ドット生成
  // -------------------------
  function buildDots() {
    if (!dotsWrap) return;
    dotsWrap.innerHTML = '';
    for (let i = 0; i < originalCount; i++) {
      const dot = document.createElement('button');
      dot.type = 'button';
      dot.className = 'by-dot' + (i === 0 ? ' is-active' : '');
      dot.addEventListener('click', function () {
        goTo(i + 1); // クローンぶん +1
      });
      dotsWrap.appendChild(dot);
    }
  }

  function updateDots() {
    if (!dotsWrap) return;
    const dots = dotsWrap.querySelectorAll('.by-dot');
    dots.forEach((dot, i) => {
      const realIndex = (index - 1 + originalCount) % originalCount;
      dot.classList.toggle('is-active', i === realIndex);
    });
  }

  // -------------------------
  // 中央にくるように位置調整
  // -------------------------
  function applyTransform(noAnimation) {
    const winW   = windowEl.clientWidth;
    const slide  = slides[index];
    const slideW = slide.clientWidth;
    const left   = slide.offsetLeft;

    const target = left - (winW - slideW) / 2;

    track.style.transition = noAnimation ? 'none' : 'transform 0.35s ease';
    track.style.transform  = 'translateX(' + (-target) + 'px)';
  }

  function goTo(newIndex, noAnimation) {
    if (isAnimating && !noAnimation) return;
    index = newIndex;
    isAnimating = !noAnimation;
    applyTransform(noAnimation);
    updateDots();
  }

  // 初期表示
  buildDots();
  applyTransform(true);

  // 次へ／前へ
  nextBtn && nextBtn.addEventListener('click', function () {
    if (isAnimating) return;
    goTo(index + 1);
  });

  prevBtn && prevBtn.addEventListener('click', function () {
    if (isAnimating) return;
    goTo(index - 1);
  });

  // アニメーション終了後、クローンだったら本物へ瞬間ジャンプ
  track.addEventListener('transitionend', function () {
    isAnimating = false;

    if (index === slides.length - 1) {
      // 右端 = 「最初のクローン」 → 本物の1枚目へ
      index = 1;
      applyTransform(true);
      updateDots();
    } else if (index === 0) {
      // 左端 = 「最後のクローン」 → 本物の最後へ
      index = slides.length - 2;
      applyTransform(true);
      updateDots();
    }
  });

  // 画面サイズ変更時も中央に補正
  window.addEventListener('resize', function () {
    applyTransform(true);
  });

  // ============================
  // 自動スライド（表示間隔）
  // ============================
  const interval = 3000;  // 3秒ごとにスライド

  let autoId = setInterval(function () {
    goTo(index + 1);
  }, interval);

  // ホバー中は停止（PC向け）
  slider.addEventListener('mouseenter', function () {
    if (autoId) {
      clearInterval(autoId);
      autoId = null;
    }
  });

  slider.addEventListener('mouseleave', function () {
    if (!autoId) {
      autoId = setInterval(function () {
        goTo(index + 1);
      }, interval);
    }
  });
});
</script>



<p><code>[mw_bike_quote]</code></p>



<section class="by-guide">
  <div class="by-pickup-header">
    <p class="by-label-main">GUIDE</p>
    <p class="by-label-sub">バイク輸送ガイド</p>
  </div>

  <div class="by-guide-grid">

    <a href="#" class="by-guide-card">
      <div class="by-guide-icon">
        <img decoding="async" src="http://bike-yusou.com/wp-content/uploads/2025/12/サービスアイコン.png" alt="バイク輸送サービスのアイコン">
      </div>
      <p class="by-guide-text">バイク輸送ってどんなサービス？</p>
    </a>

    <a href="#" class="by-guide-card">
      <div class="by-guide-icon">
        <img decoding="async" src="http://bike-yusou.com/wp-content/uploads/2025/12/シーンアイコン.png" alt="利用シーンのアイコン">
      </div>
      <p class="by-guide-text">バイク輸送の利用シーン</p>
    </a>

    <a href="#" class="by-guide-card">
      <div class="by-guide-icon">
        <img decoding="async" src="http://bike-yusou.com/wp-content/uploads/2025/12/業者アイコン.png" alt="業者選びのアイコン">
      </div>
      <p class="by-guide-text">業者選びで失敗しないポイント</p>
    </a>

    <a href="#" class="by-guide-card">
      <div class="by-guide-icon">
        <img decoding="async" src="http://bike-yusou.com/wp-content/uploads/2025/12/個人売買アイコン.png" alt="個人売買の注意点アイコン">
      </div>
      <p class="by-guide-text">個人売買の注意点</p>
    </a>

    <a href="#" class="by-guide-card">
      <div class="by-guide-icon">
        <img decoding="async" src="http://bike-yusou.com/wp-content/uploads/2025/12/チェックアイコン.png" alt="チェックポイントのアイコン">
      </div>
      <p class="by-guide-text">輸送前のチェックポイント</p>
    </a>

  </div>
</section>



<section class="by-article-list">
  <div class="by-article-list-header">
    <p class="by-label-main">ARTICLE</p>
    <p class="by-label-sub">記事一覧</p>
  </div>

  <div class="by-article-list-grid">

<a href="https://bike-yusou.com/2025/12/05/bike-transport-guide/" class="by-article-list-card">
  <div class="by-article-list-thumb">
    <img decoding="async" 
      src="http://bike-yusou.com/wp-content/uploads/2025/12/bike-transport-loaded.webp"
      alt="バイク輸送ガイドのアイキャッチ画像">
  </div>
  <p class="by-article-list-title">バイク輸送とは？利用シーンから依頼の流れまで徹底解説</p>
</a>

    <!-- 以下、同じ形で記事カードを追加していく -->

  </div>
</section>
			</div>

	
	
	
	
		
	
</div><!-- [ /#post-17 ] -->

	
		
		
		
		
	

					</div><!-- [ /.main-section ] -->

		
	</div><!-- [ /.site-body-container ] -->

	
</div><!-- [ /.site-body ] -->


<footer class="site-footer">

		
		
	
	<div class="container site-footer-copyright">
			<p>Copyright &copy; バイク輸送の窓口｜バイク輸送.com All Rights Reserved.</p><p>Powered by <a href="https://wordpress.org/">WordPress</a> &amp; <a href="https://wordpress.org/themes/lightning/" target="_blank" title="Free WordPress Theme Lightning"> Lightning Theme</a> by Vektor,Inc. technology.</p>	</div>
</footer> 
<div id="vk-mobile-nav-menu-btn" class="vk-mobile-nav-menu-btn">MENU</div><div class="vk-mobile-nav vk-mobile-nav-drop-in" id="vk-mobile-nav"></div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/lightning-child/*","/wp-content/themes/lightning/_g3/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script type="text/javascript" src="https://bike-yusou.com/wp-content/themes/lightning/vendor/vektor-inc/vk-swiper/src/assets/js/swiper-bundle.min.js?ver=11.0.2" id="vk-swiper-script-js"></script>
<script type="text/javascript" id="vk-swiper-script-js-after">
/* <![CDATA[ */
var lightning_swiper = new Swiper('.lightning_swiper', {"slidesPerView":1,"spaceBetween":0,"loop":false,"autoplay":{"delay":"4000"},"pagination":{"el":".swiper-pagination","clickable":true},"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"effect":"slide"});
//# sourceURL=vk-swiper-script-js-after
/* ]]> */
</script>
<script type="text/javascript" id="lightning-js-js-extra">
/* <![CDATA[ */
var lightningOpt = {"header_scrool":"1","add_header_offset_margin":"1"};
//# sourceURL=lightning-js-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://bike-yusou.com/wp-content/themes/lightning/_g3/assets/js/main.js?ver=15.30.1" id="lightning-js-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://bike-yusou.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}}
</script>
<script type="module">
/* <![CDATA[ */
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://bike-yusou.com/wp-includes/js/wp-emoji-loader.min.js
/* ]]> */
</script>
</body>
</html>