{% extends 'default_frame.twig' %}
{% set body_class = 'front_page' %}
{% block main %}
<main class="p-top">
{#<div class="c-loading">#}
{# <img alt="" class="lazyload" src="/html/user_data/assets/img/common/logo_w.png" />#}
{#</div>#}
<section class="c-mv01">
<div class="c-slider06">
<div class="c-slider06__content swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video class="js-video pc" src="/html/user_data/assets/movie/upcoming_pc_v2.mp4" autoplay loop muted playsinline></video>
<video class="js-video sp" src="/html/user_data/assets/movie/upcoming_sp_v2.mp4" autoplay loop muted playsinline></video>
<div class="movie__btn"><button class="js-video-button"><img src="/html/user_data/assets/img/top/sound_off.png" alt="音声をオンにする"></button></div>
</div>
<style>
.c-mv01 .video__wrap{
display: flex;
justify-content:center;
}
.c-mv01 .video{
position: relative;
height: 100vh;
width: max-content;
}
.c-mv01 video{
height: 100%;
}
.c-mv01 .movie__btn{
position: absolute;
bottom: 1em;
right: 1em;
width: clamp(30px,calc(50/1440*100vw),50px);
}
.c-mv01 button{
background: transparent;
border: none;
padding: 0;
}
.c-mv01 button img{
width: 100%;
}
.pc{
display: block;
}
.sp{
display: none;
}
@media (max-width:767px){
.up_coming .video,
.up_coming video{
width: 100%;
height: auto;
}
}
</style>
<script>
// videoタグとbuttonタグを変数に格納
const video = document.querySelector(".js-video");
const videoButton = document.querySelector(".js-video-button");
// mutedを操作する関数を定義
const toggleAudio = () => {
video.muted = !video.muted;
}
videoButton.addEventListener('click', () => {
// 関数を実行
toggleAudio();
// テキストを画像に置き換える
if (video.muted) {
videoButton.innerHTML = '<img src="/html/user_data/assets/img/top/sound_off.png" alt="音声をオフにする">';
} else {
videoButton.innerHTML = '<img src="/html/user_data/assets/img/top/sound_on.png" alt="音声をオンにする">';
}
});
</script>
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_01.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_01.jpg" />#}
{# </div>#}
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_01.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_01.jpg" />#}
{# </div>#}
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_01.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_01.jpg" />#}
{# </div>#}
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_01.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_01.jpg" />#}
{# </div>#}
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_02.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_02.jpg" />#}
{# </div>#}
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_02.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_02.jpg" />#}
{# </div>#}
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_03.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_03.jpg" />#}
{# </div>#}
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_04.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_04.jpg" />#}
{# </div>#}
{# <div class="swiper-slide">#}
{# <img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_05.jpg" />#}
{# <img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_05.jpg" />#}
{# </div>#}
{#</div>#}
{#<div class="swiper-pagination"></div>#}
</div>
</div>
{#<h1 class="c-mv01__logo">#}
{# <a href="index.html">#}
{# <span class="c-mv01__logo__alt">NO GOOD RACING</span>#}
{# <img alt="" class="lazyload" src="/html/user_data/assets/img/common/logo_w.png" />#}
{# </a>#}
{#</h1>#}
<a class="c-mv01__scroll pc" href="#"> <img alt="scroll" class="lazyload" src="/html/user_data/assets/img/common/scroll.svg" /></a>
</section>
<!-- <section id="is-product" class="p-top1">
<div class="l-container">
<div class="c-slider01">
<div class="c-slider01__number pc">
<p class="c-slider01__number__current">1</p>
<p class="c-slider01__number__total">1</p>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="product.html">
<figure class="c-slider01__img">
<img class="no-lazyload" src="/html/user_data/assets/img/top/prd_01.webp" alt="JOURNAL" />
</figure>
<div class="c-slider01__url">
<p class="c-slider01__subtitle">HOT</p>
<h2 class="c-slider01__title">'HOTTO GENERATION' Artwork <br />Hoodie by Roughsmoke V2</h2>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="product.html">
<figure class="c-slider01__img">
<img class="no-lazyload" src="/html/user_data/assets/img/top/prd_01.webp" alt="JOURNAL" />
</figure>
<div class="c-slider01__url">
<p class="c-slider01__subtitle">HOT</p>
<h2 class="c-slider01__title">'HOTTO GENERATION' Artwork <br />Hoodie by Roughsmoke V2</h2>
</div>
</a>
</div>
<div class="swiper-slide">
<a href="product.html">
<figure class="c-slider01__img">
<img class="no-lazyload" src="/html/user_data/assets/img/top/prd_01.webp" alt="JOURNAL" />
</figure>
<div class="c-slider01__url">
<p class="c-slider01__subtitle">HOT</p>
<h2 class="c-slider01__title">'HOTTO GENERATION' Artwork <br />Hoodie by Roughsmoke V2</h2>
</div>
</a>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</section> -->
<section class="p-top3">
<div class="l-container">
<h2 class="c-title1">PRODUCT</h2>
<ul class="c-list7">
<li class="c-list7__item">
<a href="/products/list?category_id=1">
<figure class="c-list7__img">
<img alt="APPAREL" class="lazyload" src="https://nogood-racing.shop/html/upload/save_image/0804012120_66ae5900b63fb.jpg" />
</figure>
<div class="c-list7__inner">
<h3 class="c-list7__title">
アパレル<br>- APPAREL -
</h3>
{#<p class="c-list7__text jp">一番人気</p>#}
{#<p class="c-list7__text en">most popular</p>#}
</div>
</a>
</li>
<li class="c-list7__item">
<a href="/products/list?category_id=2">
<figure class="c-list7__img">
<img alt="STICKER" class="lazyload" src="/html/user_data/assets/img/top/cat_link_sticker.jpg" />
</figure>
<div class="c-list7__inner">
<h3 class="c-list7__title">
ステッカー<br>- STICKER -
</h3>
{#<p class="c-list7__text jp">ギフト人気 No.1 !</p>#}
{#<p class="c-list7__text en">No.1! for Gifting</p>#}
</div>
</a>
</li>
<li class="c-list7__item">
<a href="/products/list?category_id=5">
<figure class="c-list7__img">
<img alt="CAR ITEMS" class="lazyload" src="/html/user_data/assets/img/top/cat_link_caritems.jpg" />
</figure>
<div class="c-list7__inner">
<h3 class="c-list7__title">カー用品<br>- CAR ITEMS -</h3>
{#<p class="c-list7__text"></p>#}
{#<p class="c-list7__text jp">男性人気 No.1 !</p>#}
{#<p class="c-list7__text en">No.1! for Mens</p>#}
</div>
</a>
</li>
{#<li class="c-list7__item">#}
{# <a href="https://nogood-racing.shop/products/detail/2">#}
{# <figure class="c-list7__img">#}
{# <img alt="" class="lazyload" src="/html/user_data/assets/img/product/prd_05.webp" />#}
{# </figure>#}
{# <div class="c-list7__inner">#}
{# <h3 class="c-list7__title">#}
{# <span> 'HOTTO GENERATION' Artwork<br />Hoodie by Roughsmoke'</span><sup>V3</sup>#}
{# </h3>#}
{# <p class="c-list7__text jp">女性人気 No.1 !</p>#}
{# <p class="c-list7__text en">No.1! for Ladies</p>#}
{# </div>#}
{# </a>#}
{#</li>#}
{#<li class="c-list7__item c-list7__item--style2">#}
{# <a href="{{ url('product_list')}}"><span>VIEW ALL PRODUCTS</span></a>#}
{#</li>#}
</ul>
</div>
</section>
<section class="p-top4">
<div class="l-container">
<h2 class="c-title1">ABOUT SHIPPING</h2>
</div>
<div class="p-top4__content">
<div class="p-top4__img">
<div class="c-slider06">
<div class="c-slider06__content swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="no-lazyload" src="/html/user_data/assets/img/top/fv_03.jpg" alt="" /></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="p-top4__inner">
<h3 class="c-title4"><img src="/html/user_data/assets/img/common/logo_w.png" alt="" /></h3>
<p class="c-text01">
<span class="lg">5,000円以上で送料無料。</span><br>
<br>
<span class="lg">更に10,000円以上で<br class="sp">非売品ステッカーをプレゼント!</span><br>
<br>
配送の流れ<br>
① 商品選択<br>
<span>ラインナップからお好みのアパレルやグッズを選んでください。</span><br>
② オプション選択<br>
<span>購入手続きの際に、ギフト配送オプションを選択。</span><br>
<span>お届け先の住所を指定ください。</span><br>
③ 注文確定<br>
<span>注文を確定し、支払いを済ませると、海外発送の手続きをさせて頂きます。</span><br>
<br>
Nogoodレーシングはあなたの大切な人へのプレゼントの配送も承っております。<br>
<br>
注意事項:<br>
海外配送サービスも手配させて頂いています。<br>
配送地域によって配送料が異なりますので事前にご確認ください。
</p>
{#<div>#}
{# <a href="#" class="c-bnt01">ギフト</a>#}
{#</div>#}
</div>
</div>
</section>
<section class="p-top5">
<div class="c-slider03">
<div class="c-slider03__left swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/html/user_data/assets/img/top/txt_no_good.png" alt="" /></div>
<div class="swiper-slide"><img src="/html/user_data/assets/img/top/txt_no_good.png" alt="" /></div>
<div class="swiper-slide"><img src="/html/user_data/assets/img/top/txt_no_good.png" alt="" /></div>
<div class="swiper-slide"><img src="/html/user_data/assets/img/top/txt_no_good.png" alt="" /></div>
<div class="swiper-slide"><img src="/html/user_data/assets/img/top/txt_no_good.png" alt="" /></div>
</div>
</div>
<div class="c-slider03__right swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- <img class="no-lazyload" src="wp/wp-content/themes/happynutsday/assets/images/top/logo03.svg" alt="The best peanut butter we believe." /> -->
<img src="/html/user_data/assets/img/top/txt_bye_police.png" alt="" />
</div>
<div class="swiper-slide">
<!-- <img class="no-lazyload" src="wp/wp-content/themes/happynutsday/assets/images/top/logo03.svg" alt="The best peanut butter we believe." /> -->
<img src="/html/user_data/assets/img/top/txt_bye_police.png" alt="" />
</div>
<div class="swiper-slide">
<!-- <img class="no-lazyload" src="wp/wp-content/themes/happynutsday/assets/images/top/logo03.svg" alt="The best peanut butter we believe." /> -->
<img src="/html/user_data/assets/img/top/txt_bye_police.png" alt="" />
</div>
<div class="swiper-slide">
<!-- <img class="no-lazyload" src="wp/wp-content/themes/happynutsday/assets/images/top/logo03.svg" alt="The best peanut butter we believe." /> -->
<img src="/html/user_data/assets/img/top/txt_bye_police.png" alt="" />
</div>
<div class="swiper-slide">
<!-- <img class="no-lazyload" src="wp/wp-content/themes/happynutsday/assets/images/top/logo03.svg" alt="The best peanut butter we believe." /> -->
<img src="/html/user_data/assets/img/top/txt_bye_police.png" alt="" />
</div>
</div>
</div>
</div>
</section>
{#<section id="jounal" class="p-top6">#}
{# <div class="l-container">#}
{# <div class="c-box01">#}
{# <h2 class="c-title1">Blog</h2>#}
{# <a href="https://nogood-racing.com/news.html" class="c-bnt02">VIEW ALL</a>#}
{# </div>#}
{# </div>#}
{# <div class="c-block01">#}
{# <div class="c-block01__inner">#}
{# <h3 class="c-block01__tit">#}
{# モータースポーツやストリートレースの世界観は時代とともに常に変化し続けています。<br>#}
{# Nogood Racingではこの時代の流れに合わせ仲間たちと良い良いカーライフを楽しむための情報を発信しています。<br>#}
{# この速いペースで動く世界を共有し、私たちの愛と専門知識を皆さんと分かち合うために、公式ブログを配信しています。<br>#}
{# <br>#}
{# <b>製品レビュー</b><br>#}
{# Nogood Racingの最新アパレルやアクセサリー、限定商品の詳細なレビューを発信しています。<br>#}
{# また、購入前のお客様のご質問も受け付けています。<br>#}
{# <br>#}
{# <b>モータースポーツ文化</b><br>#}
{# ストリートレースやサーキット上でのテクニックだけでなく、モータースポーツの文化や歴史についても知識を深めることができます。<br>#}
{# <br>#}
{# Nogood Racing 公式ブログでは、モータースポーツやストリートレースファンへ向けた情報とインスピレーションを発信し続けています。<br>#}
{# 私たちと一緒に、モータースポーツの興奮と魅力を体験しましょう。#}
{# </h3>#}
{# <br><br>#}
{# <div class="c-bnt01"><a href="https://nogood-racing.com/archive/category/news">記事を読む</a></div>#}
{# </div>#}
{# <figure class="c-block01__img">#}
{# <img alt="テキスト" class="lazyload" src="/html/user_data/assets/img/top/fv_02.jpg" />#}
{# </figure>#}
{# </div>#}
{#</section>#}
{#<section class="p-top7">#}
{# <div class="l-container">#}
{# <div class="c-box01">#}
{# <h2 class="c-title1">Parts</h2>#}
{# <a href="https://nogood-racing.com/news.html" class="c-bnt02">VIEW ALL</a>#}
{# </div>#}
{# <div class="c-block02">#}
{# <div class="c-block02__item c-block02__style1">#}
{# <a href="https://nogood-racing.shop/products/detail/1">#}
{# <figure class="c-block02__img">#}
{# <img alt="" class="lazyload" src="/html/user_data/assets/img/product/prd_01.webp" />#}
{# </figure>#}
{# <div class="c-block02__inner">#}
{# <div class="c-block02__head">#}
{# <p class="c-block02__code">#001</p>#}
{# <h3 class="c-block02__title">'HOTTO GENERATION' <br />Artwork Hoodie by Roughsmoke V2</h3>#}
{# </div>#}
{# <div class="c-block02__content">#}
{# <p class="c-block02__text">#}
{# This Artwork Hoodie by Roughsmoke depicts to what we refer to in Osaka as the "Hotto Generation" (Hot Generation) of Civis that make up the golden period of#}
{# Civic culture in the Osaka and Kansai region.#}
{# </p>#}
{# <div class="c-block02__bnt">#}
{# <div class="c-bnt01">view more</div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </a>#}
{# </div>#}
{# <div class="c-block02__item c-block02__style2">#}
{# <a href="https://nogood-racing.shop/products/detail/2">#}
{# <figure class="c-block02__img">#}
{# <img alt="" class="lazyload" src="/html/user_data/assets/img/product/prd_05.webp" />#}
{# </figure>#}
{# <div class="c-block02__inner">#}
{# <div class="c-block02__head">#}
{# <p class="c-block02__code">#001</p>#}
{# <h3 class="c-block02__title">'HOTTO GENERATION' <br />Artwork Hoodie by Roughsmoke V2</h3>#}
{# </div>#}
{# <div class="c-block02__content">#}
{# <p class="c-block02__text">#}
{# This Artwork Hoodie by Roughsmoke depicts to what we refer to in Osaka as the "Hotto Generation" (Hot Generation) of Civis that make up the golden period of#}
{# Civic culture in the Osaka and Kansai region.#}
{# </p>#}
{# <div class="c-block02__bnt">#}
{# <div class="c-bnt01">view more</div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </a>#}
{# </div>#}
{# </div>#}
{# </div>#}
{#</section>#}
<section id="factory" class="p-top8">
<div class="l-container">
<h2 class="c-title1">CUSTOMIZE</h2>
</div>
<div class="c-slider06">
<div class="c-slider06__content swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img alt="" class="pc lazyload" src="/html/user_data/assets/img/top/fv_03.jpg" />
<img alt="" class="sp lazyload" src="/html/user_data/assets/img/top/fv_03.jpg" />
</div>
<!--<div class="swiper-slide">
<img alt="" data-src="https://happynutsday.com/wp/wp-content/themes/happynutsday/assets/images/factory/mv02.jpg" class="pc lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
<img alt="" data-src="https://happynutsday.com/wp/wp-content/themes/happynutsday/assets/images/factory/mv02_sp.jpg" class="sp lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</div>
<div class="swiper-slide">
<img alt="" data-src="https://happynutsday.com/wp/wp-content/themes/happynutsday/assets/images/factory/mv03.jpg" class="pc lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
<img alt="" data-src="https://happynutsday.com/wp/wp-content/themes/happynutsday/assets/images/factory/mv03_sp.jpg" class="sp lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</div>-->
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="l-container">
<div class="p-top8__inner">
<p class="c-text01">
Nogood Racingでは、あなたのカーライフをさらなる高みへと導くカスタマイズサービスを提供しています。<br>
オリジナルのカスタマイズで、あなたの愛車をモータースポーツの世界で一際輝く存在に仕上げます。
</p>
<a href="#" class="c-bnt01">詳しく見る</a>
</div>
</div>
</section>
{#<section class="p-top9">#}
{# <div class="l-container">#}
{# <h2 class="c-title1">ABOUT US</h2>#}
{# <div class="c-list01">#}
{# <div class="swiper">#}
{# <div class="swiper-wrapper">#}
{# <div class="c-list01__item swiper-slide">#}
{# <a href="https://nogood-racing.com/">#}
{# <figure class="c-list01__img">#}
{# <img class="lazyload" src="/html/user_data/assets/img/top/fv_02.jpg" />#}
{# </figure>#}
{# <h3 class="c-list01__title">NO GOOD OFIICIAL SITEへ</h3>#}
{# </a>#}
{# </div>#}
{# <div class="c-list01__item swiper-slide">#}
{# <a href="https://nogood-racing.com/">#}
{# <figure class="c-list01__img">#}
{# <img class="lazyload" src="/html/user_data/assets/img/top/fv_03.jpg" />#}
{# </figure>#}
{# <h3 class="c-list01__title">カスタマイズについて</h3>#}
{# </a>#}
{# </div>#}
{# <div class="c-list01__item swiper-slide">#}
{# <a href="/product_list/">#}
{# <figure class="c-list01__img">#}
{# <img class="lazyload" src="/html/user_data/assets/img/top/fv_04.jpg" />#}
{# </figure>#}
{# <h3 class="c-list01__title">製品について</h3>#}
{# </a>#}
{# </div>#}
{# <div class="c-list01__item swiper-slide">#}
{# <div href="#">#}
{# <figure class="c-list01__img">#}
{# <img class="lazyload" src="/html/user_data/assets/img/top/fv_06.jpg" />#}
{# </figure>#}
{# <h3 class="c-list01__title">NO GOOD RACINGについて</h3>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{#</section>#}
</main>
<script type="text/javascript" src="wp/wp-content/plugins/wp-smushit/app/assets/js/smush-lazy-load.min%EF%B9%96ver=3.12.5.js" id="smush-lazy-load-js"></script>
{% endblock %}