<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wilson×KPI ウイルソン館 │KPI </title>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HPQ1BHYDD7">
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-HPQ1BHYDD7');
    </script>
    <script>
    document.addEventListener("DOMContentLoaded", () => {
    const container = document.querySelector(".video-container");
    if (!container) {
        console.log("No video container found.");
        return;
    }

    const videos = container.querySelectorAll("iframe");
    if (videos.length === 0) {
        console.log("No videos found in the container.");
        return;
    }

    const updateContainerStyles = () => {
        const containerWidth = container.offsetWidth;
        let contentWidth = 0;

        // 動画の幅を合計
        videos.forEach(video => {
            contentWidth += video.offsetWidth;
        });

        // 横スクロールの有効化/無効化
        if (contentWidth > containerWidth) {
            container.style.overflowX = "auto";
        } else {
            container.style.overflowX = "hidden";
        }
    };

    // 初期スタイルの設定
    const initializeStyles = () => {
        container.style.gridTemplateColumns = `repeat(${videos.length}, 1fr)`;
        container.style.display = "grid";
        container.style.gap = "10px";
        container.style.overflowX = "auto";
        updateContainerStyles();
    };

    // iframeのロード完了時にスタイルを更新
    const handleIframeLoad = () => {
        updateContainerStyles();
    };

    // 各iframeにロードイベントを追加
    videos.forEach(video => {
        video.addEventListener("load", handleIframeLoad);
    });

    // ウィンドウリサイズ時にスタイルを更新
    window.addEventListener("resize", updateContainerStyles);

    // 初期化
    initializeStyles();
});

    </script>
    <script defer>
        // 動画コンテナの調節
document.addEventListener("DOMContentLoaded", () => {
    const container = document.querySelector(".video-container");
    if (!container) {
        // video-containerが存在しない場合は処理を行わない
        return;
    }

    const videos = container.querySelectorAll("#videos");
    const count = videos.length;

    if (count === 0) {
        // ビデオが0個の場合は処理を行わない
        console.log("No videos found.");
        return;
    }

    // デフォルトのスタイルをリセット
    container.style.gridTemplateColumns = "unset";
    container.style.overflowX = "hidden";

    if (count === 1) {
        // 動画が1個の場合は幅いっぱいに表示
        container.style.gridTemplateColumns = "1fr"; // 1列表示
        container.style.maxWidth = "100%"; // コンテナが画面幅いっぱい
    } else if (count === 2 || count === 4 || count === 6) {
        // 動画が2個、4個、6個の場合は1行に2個ずつ配置
        container.style.gridTemplateColumns = "repeat(2, 1fr)";
    } else {
        // それ以外の場合は動画数に応じた列数でグリッドを設定
        container.style.gridTemplateColumns = `repeat(${Math.ceil(count / 2)}, 1fr)`;
        container.style.overflowX = "auto"; // 横スクロールを有効にする
    }

    // 必要に応じて横スクロールを有効化
    const containerWidth = container.offsetWidth;
    const contentWidth = videos[0].offsetWidth * 2; // 必要な幅を計算（1行に2個分）
    if (contentWidth > containerWidth) {
        container.style.overflowX = "auto";
    }
});
    </script>
	<style>
        /* リセット */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 全体のレイアウト */
        html {
            font-size: 1vw;
        }
        
        body {
            line-height: 1.4;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            min-height: 100vh;
            padding: 0;
        }

        /* ヘッダー部分のスタイル */
        .site-header, .video-header, .mini-header, .footer-add-banner{
            max-width: 1080px;
            width: 100%;
            background-color: #fff;
            padding: 0px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1vw;     
            max-width: 1080px;
        }

        .site-header{
            width: 100% !important;
            max-width: 1080px !important; 
            height: auto !important; 
            padding: 0 !important; 
            margin: 0 auto!important;
            overflow: visible !important; 
            display: block !important;
        }

        .site-header-pickup {
            width: 100%;
            background-color: #fff;
            padding: 0px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1vw;     
            max-width: 1080px;
        }
    
        
        /* 動画コンテナのスタイル */
        .video-container {
            display: flex;
            gap: 10px;
            overflow-x: auto; /* 横スクロールを有効に */
            max-width: 1080px;
            margin: 0 auto;
            padding: 10px;
        }
        
        .video-container iframe {
            flex: 1 1 100%; /* 動画が1つの場合は全幅表示 */
            height: auto;
            aspect-ratio: 16 / 9;
            max-width: 500px; /* 最大幅を指定して小さすぎる表示を防ぐ */
            min-width: 320px;
        }
        
        /* 動画が複数ある場合、ウィンドウサイズに合わせて表示 */
        @media (max-width: 768px) {
            .video-container iframe {
                flex: 1 1 70%; /* タブレットでのサイズ調整 */
            }
        }
        
        @media (max-width: 480px) {
            .video-container iframe {
                flex: 1 1 100%; /* スマホでの全幅表示 */
                max-width: none;
            }
        }
        
        /* ヘッダーバナー画像のレスポンシブ対応 */
        .banner img {
            width: 100%;
            max-width: 1080px;
            height: auto;
            padding-bottom: 15px;
        }

        .footer-add-banner img {
            width: 100%;
            max-width: 1080px;
            height: auto;
            padding: 15px 10px;
        }
        
        @media (max-width: 480px) {
            .banner img {
                height: auto;
                max-height: 120px;
            }
        }
      </style>
	<style>        
        /* 横並びにするスタイル */
        .sub-header {
            display: flex; 
            justify-content: center;
        }
        /* リンクスタイルの調整 */
        .sub-header a {
            text-decoration: none; /* デフォルトの下線を削除 */
            color: black; /* テキストを黒色に */
            font-size: 10px; /* サイズ調整 */
            padding:  0 15px; /* 各リンク間のスペース */
            line-height: 1.5;
            margin-top: 4px;
            margin-bottom: 20px;
        }

        .sub-header a:hover {
        color: gray; 
        border-bottom: 1px solid gray;
        }

        .sub-menu__wrapper {
            display: flex;
        }
        
        @media (max-width: 1024px) {
        .sub-header {
            flex-wrap: wrap; /* 段を分ける */
            text-align: center;
        }

        .search__wrapper,
        .sub-menu__wrapper {
            flex: 1 1 100%; /* 横幅を100% */
        }

        .sub-menu__wrapper {
            margin-top: 5px;
            justify-content: center;
        }

        .text-box {
        /* テキストボックスの幅を調整 */
            font-size: 14px;
            padding: 4px;
            width: 400px;
        }

        .search__start {
            font-size: 15px;
        }

        .sub-menu__wrapper h3 {
            font-size: 12px; 
        }
        }

        @media (max-width: 768px) {
        .text-box {
            font-size: 5px;
            padding: 4px;
            max-width: 340px;
            width: 80%;
            min-width: 140px;
        }

        .search__start {
            font-size: 7px;
            padding: 2px;
        }
        .sub-menu__wrapper {
            display: grid; /* Gridを使用して2列レイアウトに */
            grid-template-columns: 1fr 1fr; /* 2列に配置 */
            gap: 10px;
        }

        .text-box {
            font-size: 10px;
            padding: 4px;
        } 

        .search__start {
            font-size: 10px;
            padding: 2px;
        }

        .sub-menu__wrapper h3 {
            font-size: 10px;
        }
        }
        /*/ 商品一覧のレイアウト */
        .product-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1vw;
            padding: 1vw;
            width: 100%;
            max-width: 1080px;
            margin: 0 auto;
            background-color: #fff; /* 背景色を追加して白い部分が表示されないように */
        }
        
        /* レスポンシブ対応：タブレットとスマホでの列数変更 */
        @media (max-width: 1024px) {
            .product-list {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .product-list {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .link-item {
            color: rgb(81, 81, 81);
            padding: 10px;
            font-size: 13px
        }

        @media (max-width: 474px) {
            
            .link-item {
                color: rgb(81, 81, 81);
                padding: 7px;
                font-size: 10px
            }
        }
        
        .link-item:hover {
            opacity: 0.8;
        }

        /* 商品セクションの全体レイアウト */
        .product {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            padding: 0.5vw;
            box-shadow: 0 0 5px rgba(156, 156, 156, 0.1);
            min-height: 240px;
            gap: 0.5vw;
        }
        
        .image-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-bottom: 0;
        }
        
        .product img {
            width: 100%;
            height: auto;
            max-height: 180px;
            object-fit: contain;
            display: block;
        }
        
        .product img:hover {
            opacity: 0.8;
        }
        
        /* テキスト部分のスタイル */
        .text-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            margin-top: 0;
            gap: 0.2vw;
        }
        
        .product h2 {
            font-size: 0.9em;
            margin: 0.2vw 0;
            color: #333;
        }
        
        .product p {
            font-size: 0.8em;
            color: #666;
            margin: 0.2vw 0;
        }

        .product a {
            color: black;
            font-weight: bold;
            font-size: 0.8em;
            text-decoration: none;
            transition: color 0.3s;
        }

        @media (max-width: 1023px) {
            .product h2 {
            font-size: 1.2em;
    
        }
            .product p {
            font-size: 1.1em;
            }

            .product a {
            font-size: 1.2em;

        }
        }

        @media (max-width: 763px) {
            .product h2 {
            font-size: 1.7em;
    
        }
            .product p {
            font-size: 1.6em;
            }

            .product a {
            font-size: 1.6em;

        }
        }

        .product a:hover {
            color: gray;
        }
        
        /* スマートフォン用のレスポンシブ対応 */
        @media (max-width: 480px) {
            .product-list {
                grid-template-columns: repeat(2, 1fr); /* 480px以下では2列表示 */
            }
        }
        </style>
	<style>
        /* フッターのレイアウト */
        .site-footer {
            width: 100%;
            background-color: #f8f8f8;
            padding: 2vw;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2vw;
        }

        .footer-section {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            max-width: 1200px;
            gap: 1vw;
            box-sizing: border-box;
        }

        .footer-item {
            background: #ffffff;
            border: 1px solid #ddd;
            padding: 2em;
            padding-bottom: 3em; /* 矢印のスペースを確保 */
            flex: 1 1 calc(25% - 1vw);
            max-width: calc(25% - 1vw);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: left;
            position: relative;
            box-sizing: border-box;
        }

        .footer-header {
            display: flex;
            align-items: center;
            gap: 0.5em;
            margin-bottom: 0.5em;
        }

        .footer-icon img {
            max-width: 55px; /* アイコンサイズ */
            min-width: none;
            width: 100%;
        }

        .footer-item h4 {
            font-size: 14px;
            margin: 0;
        }

        .footer-item p {
            font-size: 12px;
            color: #555;
            margin: 0;
            line-height: 1.6;
            white-space: normal;
            word-break: break-word;
            padding-right: 2em; /* 矢印アイコンとの距離を確保 */
        }

        .footer-link {
            position: absolute;
            bottom: 1em;
            right: 1em;
            width: 24px;
            height: 24px;
            text-decoration: none;
        }

        /* お問い合わせセクションのデザイン */
        .footer-banner {
            background: #ffffff;
            border: 1px solid #ddd;
            padding: 1.5em;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 1200px;
            box-sizing: border-box;
            position: relative;
        }

        .footer-link img {
            width: 30px; /* リンクアイコンサイズを小さく */
            height: 30px;
        }

        .footer-banner-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 1100px;
        }

        .footer-banner {
            text-decoration: none;
            color: black;
        }

        .footer-banner:hover {
            opacity: 0.8;
        }

        .footer-banner-text {
            text-align: left;
        }

        .footer-banner h4 {
            font-size: 14px;
            font-weight: bold;
            margin: 0.5em 0;
            color: #333;
        }

        .footer-banner .footer-link {
            position: absolute;
            bottom: 1em;
            right: 1em;
            width: 24px;
            height: 24px;
        }


        .footer-section a{
            text-decoration: none;
            color: black;
        }

        .footer-item:hover{
            opacity: 0.8;
        }

        /* PC表示: 1024px以上で4列＋お問い合わせ */
        @media (min-width: 1024px) {
            .footer-item {
                flex: 1 1 calc(25% - 1vw); /* 4つ表示 */
                max-width: calc(25% - 1vw);
            }
            .footer-banner {
                max-width: 1200px; /* 他のボックスと幅を揃える */
            }
        }

        /* タブレット表示: 600px～1023pxで2列×2行＋お問い合わせ */
        @media (max-width: 1023px) and (min-width: 600px) {
            .footer-item {
                flex: 1 1 calc(50% - 1vw); /* 2つ表示 */
                max-width: calc(50% - 1vw);
            }
            .footer-banner {
                max-width: calc(100% - 2vw); /* 2個分の幅で揃える */
            }
            .footer-item h4, .footer-banner h4 {
                font-size: 10px;
            }
            .footer-item p {
                font-size: 9px;
            }
        }

        /* スマホ表示: 599px以下で1列 */
        @media (max-width: 599px) {
            .footer-item,
            .footer-banner {
                flex: 1 1 100%; /* 他のボックスと同じ幅に設定 */
                max-width: 100%;
            }

            .footer-banner {
                padding: 1em;
            }
            
            .footer-banner-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 1em;
            }

            .footer-item h4, .footer-banner h4 {
                font-size: 10px;
            }
            .footer-item p {
                font-size: 9px;
            }
        }
    </style>
	<style>
/************************************ スライドショー動画**************************************/
#slide-videos,
#bestmatchstringsdunlop,
#bestmatchstringsprince,
#bestmatchstringsbabolat,
#bestmatchstringshead,
#bestmatchstringstecnifibre,
#brand-gut {
    width: 100%;
    max-width: 1080px;
    height: 600px;
    padding: 10px;
}

@media (max-width: 768px) {
    #slide-videos,
    #bestmatchstringsdunlop,
    #bestmatchstringsprince,
    #bestmatchstringsbabolat,
    #bestmatchstringshead,
    #bestmatchstringstecnifibre,
    #brand-gut {
        height: 300px;
    }
}
/************************************ 埋め込みyoutube動画**************************************/

/* 動画コンテナのスタイル */
.video-container {
    display: grid;
    gap: 10px;
    width: 100%; /* 親要素の幅いっぱい */
    max-width: 100%; /* 最大幅を画面幅に制限 */
    margin: 0 auto;
    overflow-x: auto; /* 必要に応じてスクロール */
    grid-template-columns: repeat(2, 1fr); /* デフォルトで2列 */
}

.video-container iframe {
    width: 100%; /* 動画がグリッドセルの幅にフィット */
    max-width: 100%; /* 最大幅を画面幅に制限 */
    height: auto; /* アスペクト比に基づいて高さを自動調整 */
    aspect-ratio: 16 / 9; /* アスペクト比を維持 */
    background-color: #ccc; /* デモ用背景 */
    flex-shrink: 0; /* 縮小を防ぐ */
}


.video-container::-webkit-scrollbar {
    height: 8px;
}

.video-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.video-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}


/************************************ 以下個々のページのcss**************************************/
.product-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    max-width: 1110px;
    width: 100%;
    background-color: #fff;
    padding: 20px;
}

.product-item {
    max-width: 470px; /* 幅の最大サイズ */
    max-height: 650px; /* 高さの最大サイズ */
    width: 100%;
    height: 100%;
}

.product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をコンテナにフィットさせる */
    max-width: 470px; /* 幅の最大サイズ */
    max-height: 650px; /* 高さの最大サイズ */
}

.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Arial, sans-serif;
    color: #2c4730;
}

.text-center h2 {
    font-size: 1.5em;
    margin: 0;
}

.text-center p {
    font-size: 1em;
    margin: 5px 0 0;
}

.product-categoryname_1 {
    grid-column: 1 / -1; /* 全幅に設定 */
    padding: 1vw 0;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    border-top: 2px solid #ccc; /* 上部に線を追加 */
    border-bottom: 2px solid #ccc; /* 下部に線を追加 */
    margin-bottom: 1vw;
}

.product-categoryname_2 {
    grid-column: 1 / -1; /* 全幅に設定 */
    padding: 1vw 0;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #555555; /* 白文字に設定 */
    background-color: #EFEFEF; /* 黒背景に設定 */
    margin-bottom: 1vw;
    border: none; /* 上下の線を削除 */
}

.product-categoryname_3 {
    grid-column: 1 / -1; /* 全幅に設定 */
    padding: 1vw 0;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #fff; /* 白文字に設定 */
    background-color: #333; /* 黒背景に設定 */
    margin-bottom: 1vw;
    border: none; /* 上下の線を削除 */
}
.product-categoryname_1 h3, .product-categoryname_2 h3, .product-categoryname_3 h3 {
    margin: 0;
    font-size: 14px;
}


</style>
<style>
.footer-link-banner img {
    width: 100%;
    max-width: 1080px;
    height: auto;
}


.nav-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    justify-content: center;
    max-width: 80%; /* 幅を少し狭く設定 */
    margin: 0 auto; /* 中央揃え */
    border-radius: 5px; /* 角を少し丸める */
}

.nav-container .pickup {
    font-weight: bold;
    color: white;
    background-color: #333;
    padding: 5px 10px;
    text-decoration: none;
}

.nav-container a {
    color: #333;
    text-decoration: none;
}

.nav-container a:hover {
    text-decoration: underline;
}

.nav-container .separator {
    color: #ccc;
}

@media (max-width: 474px) {
            

    .nav-container {
        gap: 6px;
        padding: 0px;
        width: 100%;
        max-width: 470px;
    }

    .nav-container a {
        font-size: 6.5px;
    }


    }
</style>
	<style>
body {
            background-image: url("sp-wilson-back.jpg") !important;
            background-repeat: repeat !important;
            background-size: contain !important; 
            background-position: center center; 
        }

        @media (max-width: 768px) {
            body {
                background-size: cover !important;
                background-position: center top;
            }
}
</style>
</head>
<body>
    <header class="site-header">
		            <div class="banner">
                        <img src="sp-wilson-title.jpg" alt="バナー">
                    </div>
		<div class="sub-header">
<div class="search__wrapper">
    <form id="searchForm" method="get" action="https://store.shopping.yahoo.co.jp/kpi/search.html?p=" accept-charset="EUC-JP">
        <input class="text-box" id="searchInput" type="text" name="p" value="" placeholder="検索ワードを入力">
        <input class="search__start" type="submit" value="ストア内検索">
    </form>
</div>

<script>
    document.getElementById('searchForm').addEventListener('submit', function (e) {
        e.preventDefault(); // フォーム送信を防ぐ

        const input = document.getElementById('searchInput').value;
        let encodedInput = input
            .replace(/ /g, '+') // 半角スペースを `+` に変換
            .replace(/　/g, '%E3%80%80'); // 全角スペースを `%E3%80%80` に変換

        // フォームの action 属性を更新
        const baseURL = "https://store.shopping.yahoo.co.jp/kpi/search.html?p=";
        const searchURL = baseURL + encodedInput;
        this.action = searchURL;

        // フォームを送信
        this.submit();
    });
</script>                        <div class="sub-menu__wrapper">
                            <a href="https://shopping.geocities.jp/kpi/" target="top">
                                <h3>トップページ</h3>
                            </a>
                            <a href="https://store.shopping.yahoo.co.jp/kpi/info.html#storeinfo" target="top">
                                <h3>会社概要</h3>
                            </a>
                            <a href="https://shopping.geocities.jp/kpi/kpi/guide/qa.htm" target="top">
                                <h3>決済・配送・返品</h3>
                            </a>
                            <a href="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form?mmode=pm&sc_i=pmall_pc_top-store_hnav_cart" target="top">
                                <h3>買い物かご</h3>
                            </a>
                        </div>
</div>
    </header>
    <header class="video-header">
            <iframe id="slide-videos"
            title="https://www.youtube.com/embed/1-5m5MnyJ8Q?autoplay=1&mute=1"
            width= 100%
            height="600"
            frameborder=0
            scrolling="no"
            src=" https://www.youtube.com/embed/1-5m5MnyJ8Q?autoplay=1&mute=1">
            </iframe>
        <div class="video-container">
			            <iframe id="videos" src="https://www.youtube.com/embed/FVGkNUaxCX0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			            <iframe id="videos" src="https://www.youtube.com/embed/wvUI_Dn7-MQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </header>
    <main class="product-list">
		<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=wilson+RG+2025">
<img src="https://shopping.c.yimg.jp/lib/kpi/rg-collection-02.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson 2025 ROLAND GARROS COLLECTION</h2>
 <p>全仏オープンオフィシャルボールサプライヤー・ウイルソンの2025年ローランギャロスコレクション</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=wilson+RG+2025">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=clash+v3">
<img src="https://shopping.c.yimg.jp/lib/kpi/clashv3-1.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson「CLASH V3.0」Series</h2>
 <p>テニスラケット＆バッグ新製品「CLASH V3.0」シリーズ 予約開始！</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=clash+v3">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+3.0J">
<img src="https://shopping.c.yimg.jp/lib/kpi/wr187311u-1.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wison「3.0J」SERIES</h2>
 <p>テニスラケット新製品トライアド「3.0J」シリーズ</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+3.0J">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+3.0J">
<img src="https://shopping.c.yimg.jp/lib/kpi/wr187311u-1.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wison「TRIAD 3.0J」SERIES</h2>
 <p>テニスラケット新製品「TRIAD 3.0J」シリーズ</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+3.0J">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=RF+01+FUTURE">
<img src="https://shopping.c.yimg.jp/lib/kpi/rf-collection-1.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson「RF 01 FUTURE」</h2>
 <p>ロジャー・フェデラーが自分自身の為、そして次世代のプレーヤーの為に開発した全く新しいラケット。</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=RF+01+FUTURE">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=WR149811U+WR149911U+WR152411U+WR151511U+WR150111U1+WR150211U1+WR152211U1+WR150011U1+WR151710S+WR151610+WR150511U+WR150411U">
<img src="https://shopping.c.yimg.jp/lib/kpi/bladev9-a0.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson「BLADE V9」</h2>
 <p>ATP/WTAツアーで最も多くの選手に選ばれているBLADEシリーズの第9世代。BLADE史上最速。</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=WR149811U+WR149911U+WR152411U+WR151511U+WR150111U1+WR150211U1+WR152211U1+WR150011U1+WR151710S+WR151610+WR150511U+WR150411U">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=WR145311U+WR145411U+WR145511U">
<img src="https://shopping.c.yimg.jp/lib/kpi/shift99-key.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson「SHIFT V1.0」</h2>
 <p>「楽しい」の一歩その先へ。Wilsonが全てのテニスプレイヤーへ贈る「新時代ラケット」。</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=WR145311U+WR145411U+WR145511U">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=WR128210F+WR128310F+WR128410F+WR128510F+WR099610F">
<img src="https://shopping.c.yimg.jp/lib/kpi/britto2023-a1.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson「BRITTO HEARTS COLLECTION」</h2>
 <p>心躍るアートとの出会い。
現代のピカソと評されるブラジルが生んだネオ・ポップアーティスト「ロメロ・ブリット」とコラボレーションアイテム。</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=WR128210F+WR128310F+WR128410F+WR128510F+WR099610F">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+PRO+STAFF">
<img src="https://shopping.c.yimg.jp/lib/kpi/prostaffv14-a1.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson「PRO STAFF」Series</h2>
 <p>変わらない為に変わり続けるテニスの真髄。</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+PRO+STAFF">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+ULTRA">
<img src="https://shopping.c.yimg.jp/lib/kpi/ultrav4-a1.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson「ULTRA」Series</h2>
 <p>美しく打ちのめす。</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+ULTRA">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+CLASH">
<img src="https://shopping.c.yimg.jp/lib/kpi/clashv2-a1.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson「CLASH」Series</h2>
 <p>時代が終わり、全てが始まる。</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=Wilson+CLASH">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=wilson+%E6%B3%A8%E7%9B%AE">
<img src="https://shopping.c.yimg.jp/lib/kpi/brand-w-sale.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Wilson SALE up to 70％OFF</h2>
 <p>お買得！特価アイテムをピックアップ</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=wilson+%E6%B3%A8%E7%9B%AE">詳細はこちら</a>
 </div>
</section>
<section class="product">
 <div class="image-wrapper">
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=wilson">
<img src="https://shopping.c.yimg.jp/lib/kpi/brand-w-sm.jpg" alt="商品画像"></a>
 </div>
 <div class="text-wrapper">
 <h2>Free Shipping</h2>
 <p>送料無料アイテムをピックアップ</p>
 <a href="https://store.shopping.yahoo.co.jp/kpi/search.html?p=wilson">詳細はこちら</a>
 </div>
</section>

    </main>
    <footer class="site-footer">
				        <div class="footer-section">
            <!-- Footer Item 1 -->
            <a href="https://shopping.geocities.jp/kpi/kpi/guide/qa.htm#q1-23" class="footer-item">
                <div class="footer-header">
                    <div class="footer-icon"><img src="https://kpitennis.com/html/upload/t_image/logoBrown.png" alt="アイコン"></div>
                    <h4><strong>返品・返金</strong></h4>
                </div>
                <p>当店の規定に従い、未使用品に限り到着日より7日間返品・返金を承ります。（返品申請フォームよりご連絡いただいたもののみ対応いたします）</p>
                <div class="footer-link"><img src="https://kpitennis.com/html/upload/t_image/toLink.png" alt="リンクアイコン"></div>
            </a>

            <!-- Footer Item 2 -->
            <a href="https://shopping.geocities.jp/kpi/kpi/guide/qa.htm#q1-09" class="footer-item">
                <div class="footer-header">
                    <div class="footer-icon"><img src="https://kpitennis.com/html/upload/t_image/logoBrown.png" alt="アイコン"></div>
                    <h4><strong>配送について</strong></h4>
                </div>
                <p>3,980円（税込）以上ご注文いただいた場合、送料無料となります。（通常送料800円）</p>
                <div class="footer-link"><img src="https://kpitennis.com/html/upload/t_image/toLink.png" alt="リンクアイコン"></div>
            </a>

            <!-- Footer Item 3 -->
            <a href="https://shopping.geocities.jp/kpi/kpi/guide/qa.htm#q3-01" class="footer-item">
                <div class="footer-header">
                    <div class="footer-icon"><img src="https://kpitennis.com/html/upload/t_image/logoBrown.png" alt="アイコン"></div>
                    <h4><strong>お支払い方法</strong></h4>
                </div>
                <p>クレジットカード・後払い決済・銀行決済・PayPalよりお選びいただけます。</p>
                <div class="footer-link"><img src="https://kpitennis.com/html/upload/t_image/toLink.png" alt="リンクアイコン"></div>
            </a>

            <!-- Footer Item 4 -->
            <a href="https://shopping.geocities.jp/kpi/kpi/guide/qa.htm#q1-04" class="footer-item">
                <div class="footer-header">
                    <div class="footer-icon"><img src="https://kpitennis.com/html/upload/t_image/logoBrown.png" alt="アイコン"></div>
                    <h4><strong>キャンセル</strong></h4>
                </div>
                <p>ご注文確定後のキャンセルはお受けできません。商品をお確かめの上ご注文ください。</p>
                <div class="footer-link"><img src="https://kpitennis.com/html/upload/t_image/toLink.png" alt="リンクアイコン"></div>
            </a>
        </div>

        <!-- お問い合わせセクション -->
        <a href="https://shopping.geocities.jp/kpi/kpi/guide/qa.htm" class="footer-banner">
            <div class="footer-banner-content">
                <div class="footer-banner-text">
                    <h4><strong>お問い合わせ</strong></h4>
                </div>
                <div class="footer-link"><img src="https://kpitennis.com/html/upload/t_image/toLink.png" alt="リンクアイコン"></div>
            </div>
        </a>
    </footer>
</body>
</html>ℼⴭ琠硥⁴敢潬⁷敧敮慲整⁤祢朠潥楣楴獥樮⁰ⴭ㰾漯橢捥㹴㰊氯祡牥㰾搯癩㰾猯慰㹮⼼瑳汹㹥⼼潮捳楲瑰㰾琯扡敬㰾猯牣灩㹴⼼灡汰瑥ਾ氼湩⁫牨晥∽⼯换琭楲汰⹥慹潨⹯潣樮⽰獪港⹯獣≳爠汥∽瑳汹獥敨瑥•祴数∽整瑸振獳㸢㰊捳楲瑰氠湡畧条㵥樢癡獡牣灩≴瘾牡樠獰㈽㠰㈰〵ㄴ㬲⼼捳楲瑰ਾ猼牣灩⁴慬杮慵敧∽慪慶捳楲瑰•牳㵣⼢戯ⵣ牴灩敬礮桡潯挮⹯灪樯⽳潮樮≳㰾猯牣灩㹴㰊捳楲瑰氠湡畧条㵥樢癡獡牣灩≴猠捲∽⼯换琭楲汰⹥慹潨⹯潣樮⽰獪猯⹣獪㸢⼼捳楲瑰ਾ猼牣灩⁴慬杮慵敧∽慪慶捳楲瑰•牳㵣栢瑴獰⼺猯礮浩⹧灪椯慭敧⽳桳⵰敤楬敶祲甯楴獬ㄯ〮瀯慴䱨湩偫牡浡啳摰瑡牥樮≳㰾猯牣灩㹴�