Symfony Profiler

<?php
use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;
/* index.twig */
class __TwigTemplate_229899d9df569d355a566260957f1e21bc18cb19efee3283036cbfb432e485d1 extends \Eccube\Twig\Template
{
private $source;
private $macros = [];
public function __construct(Environment $env)
{
parent::__construct($env);
$this->source = $this->getSourceContext();
$this->blocks = [
'stylesheet' => [$this, 'block_stylesheet'],
'javascript' => [$this, 'block_javascript'],
'main' => [$this, 'block_main'],
];
}
protected function doGetParent(array $context)
{
// line 1
return "default_frame.twig";
}
protected function doDisplay(array $context, array $blocks = [])
{
$macros = $this->macros;
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "index.twig"));
// line 3
$context["body_class"] = "front_page";
// line 1
$this->parent = $this->loadTemplate("default_frame.twig", "index.twig", 1);
$this->parent->display($context, array_merge($this->blocks, $blocks));
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
}
// line 5
public function block_stylesheet($context, array $blocks = [])
{
$macros = $this->macros;
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheet"));
// line 6
echo " <link rel=\"stylesheet\" href=\"";
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/css/home.css"), "html", null, true);
echo "\">
<link rel=\"stylesheet\" href=\"";
// line 7
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/css/news-list.css"), "html", null, true);
echo "\">
<link rel=\"stylesheet\" href=\"";
// line 8
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/css/swiper-bundle.min.css"), "html", null, true);
echo "\" defer>
<style>
.header-section {
display: none;
}
@media (max-width: 1200px) {
.header-section {
display: block;
}
}
</style>
";
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
}
// line 22
public function block_javascript($context, array $blocks = [])
{
$macros = $this->macros;
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
// line 23
echo " 
<script src=\"";
// line 24
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/js/swiper-bundle.min.js"), "html", null, true);
echo "\" defer></script>
<script defer>
\$(document).ready(function() {
// Product Slider
// loop needs slides >= slidesPerView * 2 (max slidesPerView is 3)
if (document.getElementById('bannerSliderId')) {
const bannerSlideCount = document.querySelectorAll('#bannerSliderId .swiper-slide').length;
new Swiper('#bannerSliderId', {
slidesPerView: 3,
spaceBetween: 16,
loop: bannerSlideCount >= 6,
centeredSlides: false,
breakpoints: {
1200: {
slidesPerView: 3,
spaceBetween: 16,
},
768: {
slidesPerView: 3,
spaceBetween: 16,
},
0: {
centeredSlides: true,
slidesPerView: 1.2,
spaceBetween: 16,
}
},
pagination: {
el: '.productSlider-pagination',
clickable: true,
bulletClass: 'productSlider-bullet',
bulletActiveClass: 'productSlider-bullet-active',
},
navigation: {
nextEl: '.productSlider-button-next',
prevEl: '.productSlider-button-prev',
},
});
}
const howToUseSwiper = new Swiper('#howToUseSwiperId', {
slidesPerView: 'auto',
spaceBetween: 20,
centeredSlides: false,
grabCursor: true,
freeMode: {
enabled: true,
sticky: false,
},
navigation: {
nextEl: '.slider-nav-next',
prevEl: '.slider-nav-prev',
},
on: {
init: function() {
updateProgressBar(this);
},
progress: function(swiper, progress) {
updateProgressBar(swiper);
},
slideChange: function() {
updateProgressBar(this);
},
},
breakpoints: {
1200: {
spaceBetween: 20,
},
0: {
spaceBetween: 12,
}
},
});
function updateProgressBar(swiper) {
const progressBar = document.querySelector('.slider-progress-bar');
if (!progressBar) return;
// Calculate progress based on scroll position
// Start from 60% and scale to 100%
const progress = swiper.progress || 0;
const percentage = 60 + (progress * 40);
progressBar.style.width = Math.min(percentage, 100) + '%';
}
setTimeout(() => {
// Banner Slide - Pure CSS animation, no Swiper needed
// Banner Slide Text - Pure CSS animation, no Swiper needed
// click spec table top item
const specTableTopItems = document.querySelectorAll('.spec-table-top-item');
specTableTopItems.forEach(item => {
item.addEventListener('click', () => {
specTableTopItems.forEach(item => {
item.classList.remove('spec-table-top-item-active');
});
item.classList.add('spec-table-top-item-active');
// show spec table body
document.querySelectorAll('.spec-table-body').forEach(item => {
if (item.id !== `spec_\${item.dataset.id}`) {
item.style.display = 'none';
}
});
document.getElementById(`spec_\${item.dataset.id}`).style.display = 'flex';
});
});
}, 0);
});
</script>
";
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
}
// line 137
public function block_main($context, array $blocks = [])
{
$macros = $this->macros;
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
// line 138
$context["totalQuantity"] = $this->extensions['Eccube\Twig\Extension\CartServiceExtension']->get_carts_total_quantity();
// line 139
echo "

<div class=\"banner\">
";
// line 144
echo " <div class=\"banner-slide-swiper-wrapper\">
<div class=\"banner-slide-container\" id=\"bannerSlideContainerId\">
<div class=\"banner-slide-track\">
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 148
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_long.webp"), "html", null, true);
echo "\" alt=\"Banner Slide 1\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 151
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_long.webp"), "html", null, true);
echo "\" alt=\"Banner Slide 2\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 154
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_long.webp"), "html", null, true);
echo "\" alt=\"Banner Slide 3\" >
</div>
";
// line 157
echo " <div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 158
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_long.webp"), "html", null, true);
echo "\" alt=\"Banner Slide 1\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 161
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_long.webp"), "html", null, true);
echo "\" alt=\"Banner Slide 2\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 164
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_long.webp"), "html", null, true);
echo "\" alt=\"Banner Slide 3\" >
</div>
</div>
</div>
</div>
";
// line 171
echo " <div class=\"banner-slide-swiper-wrapper banner-slide-text-swiper-text\">
<div class=\"banner-slide-container\" id=\"bannerSlideTextContainerId\">
<div class=\"banner-slide-track banner-slide-track-reverse\">
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 175
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_bottom_long.png"), "html", null, true);
echo "\" alt=\"Banner Slide 1\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 178
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_bottom_long.png"), "html", null, true);
echo "\" alt=\"Banner Slide 2\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 181
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_bottom_long.png"), "html", null, true);
echo "\" alt=\"Banner Slide 3\" >
</div>
";
// line 184
echo " <div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 185
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_bottom_long.png"), "html", null, true);
echo "\" alt=\"Banner Slide 1\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 188
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_bottom_long.png"), "html", null, true);
echo "\" alt=\"Banner Slide 2\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"";
// line 191
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/full_bg_bottom_long.png"), "html", null, true);
echo "\" alt=\"Banner Slide 3\" >
</div>
</div>
</div>
</div>

<div class=\"banner__text-left\">
</div>
<div class=\"container-desktop relative\">

<div class=\"banner__logo\">
<img src=\"";
// line 203
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/logo.png"), "html", null, true);
echo "\" alt=\"Logo\">
</div>

<nav class=\"banner__nav\">
";
// line 208
if ($this->extensions['Symfony\Bridge\Twig\Extension\SecurityExtension']->isGranted("ROLE_USER")) {
// line 209
echo " <a href=\"";
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("mypage");
echo "\" class=\"nav__item text-black\">
<img src=\"";
// line 210
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-user.svg"), "html", null, true);
echo "\" alt=\"User\" class=\"nav__icon\">
<span>マイページ</span>
</a>
<a href=\"";
// line 213
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("logout");
echo "\" class=\"nav__item text-black\">
<img src=\"";
// line 214
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-logout.svg"), "html", null, true);
echo "\" alt=\"Logout\" class=\"nav__icon\">
<span>ログアウト</span>
</a>
";
} else {
// line 218
echo " <a href=\"";
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("entry");
echo "\" class=\"nav__item text-black\">
<img src=\"";
// line 219
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-edit.svg"), "html", null, true);
echo "\" alt=\"Register\" class=\"nav__icon\">
<span>会員登録</span>
</a>
<a href=\"";
// line 222
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("mypage_login");
echo "\" class=\"nav__item text-black\">
<img src=\"";
// line 223
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-lock.svg"), "html", null, true);
echo "\" alt=\"Login\" class=\"nav__icon\">
<span>ログイン</span>
</a>
";
}
// line 227
echo " <a href=\"";
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("product_list");
echo "\" class=\"nav__item nav__item--search text-black\">
<img src=\"";
// line 228
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-search.svg"), "html", null, true);
echo "\" alt=\"Search\" class=\"nav__icon\">
<span>商品を探す</span>
</a>
<a href=\"";
// line 231
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("cart");
echo "\" class=\"nav__item text-black relative\">
";
// line 232
if (((isset($context["totalQuantity"]) || array_key_exists("totalQuantity", $context) ? $context["totalQuantity"] : (function () { throw new RuntimeError('Variable "totalQuantity" does not exist.', 232, $this->source); })()) > 0)) {
// line 233
echo " <span class=\"nav__item-badge\">";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, (isset($context["totalQuantity"]) || array_key_exists("totalQuantity", $context) ? $context["totalQuantity"] : (function () { throw new RuntimeError('Variable "totalQuantity" does not exist.', 233, $this->source); })())), "html", null, true);
echo "</span>
";
}
// line 235
echo " <img src=\"";
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-cart.svg"), "html", null, true);
echo "\" alt=\"Cart\" class=\"nav__icon\">
<span>カート</span>
</a>
<a href=\"";
// line 238
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("contact");
echo "\" class=\"nav__item text-black\">
<img src=\"";
// line 239
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-email.svg"), "html", null, true);
echo "\" alt=\"Contact\" class=\"nav__icon\">
<span>お問い合わせ</span>
</a>
<a href=\"javascript:void(0);\" onclick=\"linkToMypage()\" class=\"nav__item nav__item--primary\">
<img src=\"";
// line 243
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-charger.svg"), "html", null, true);
echo "\" alt=\"Charge\" class=\"nav__icon\">
<span>ギガをチャージ</span>
</a>
</nav>
</div>

<div class=\"banner__text-right\">
</div>
</div>

";
// line 255
if ((twig_length_filter($this->env, (isset($context["banners"]) || array_key_exists("banners", $context) ? $context["banners"] : (function () { throw new RuntimeError('Variable "banners" does not exist.', 255, $this->source); })())) > 0)) {
// line 256
echo " <div class=\"slider\">
<div class=\"swiper productSlider\" id=\"bannerSliderId\">
<div class=\"swiper-wrapper\">
";
// line 259
$context['_parent'] = $context;
$context['_seq'] = twig_ensure_traversable((isset($context["banners"]) || array_key_exists("banners", $context) ? $context["banners"] : (function () { throw new RuntimeError('Variable "banners" does not exist.', 259, $this->source); })()));
foreach ($context['_seq'] as $context["_key"] => $context["Banner"]) {
// line 260
echo " <div class=\"swiper-slide\">
<div class=\"slider__card\">
<a onclick=\"if ('";
// line 262
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Banner"], "linkUrl", [], "any", false, false, false, 262), "html", null, true);
echo "') { window.open('";
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Banner"], "linkUrl", [], "any", false, false, false, 262), "html", null, true);
echo "', '_blank') }\">
<div class=\"slider__card-image\">
<img src=\"";
// line 264
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(twig_get_attribute($this->env, $this->source, $context["Banner"], "imagePath", [], "any", false, false, false, 264), "save_image"), "html", null, true);
echo "\" alt=\"";
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Banner"], "title", [], "any", false, false, false, 264), "html", null, true);
echo "\">
</div>
</a>
</div>
</div>
";
}
$_parent = $context['_parent'];
unset($context['_seq'], $context['_iterated'], $context['_key'], $context['Banner'], $context['_parent'], $context['loop']);
$context = array_intersect_key($context, $_parent) + $_parent;
// line 270
echo " </div>

<div class=\"swiper-pagination productSlider-pagination\"></div>

<div class=\"productSlider-navigation\">
<button class=\"productSlider-button productSlider-button-prev\">
<img src=\"";
// line 276
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-left-nav.svg"), "html", null, true);
echo "\" alt=\"Previous\">
</button>
<button class=\"productSlider-button productSlider-button-next\">
<img src=\"";
// line 279
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-right-nav.svg"), "html", null, true);
echo "\" alt=\"Next\">
</button>
</div>
</div>
</div>
";
}
// line 285
echo "

<div class=\"section-1\">
<div class=\"top-image-mobile\">
<img src=\"";
// line 289
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/right_banner.png"), "html", null, true);
echo "\" alt=\"section-1\" loading=\"lazy\">
</div>
<div class=\"section-1-wrapper container-1200\">
<div class=\"left_content\">
<img class=\"left_content_image\" src=\"";
// line 293
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/top_banner.png"), "html", null, true);
echo "\" alt=\"section-1\" loading=\"lazy\">
<div class=\"left_content_text container-desktop\">
<p class=\"mb-8\">CHEETAH WiFiとは契約、返却や月額料金なし、必要な時に必要な分ギガを買い切りで追加<br>チャージするだけですぐに利用できるポケットWiFiです。</p>
<p>追加できるギガは10GB・30GB・50GB・100GB、追加から365日間の有効期間があります。docomo・au・Softbankの３大キャリアはもちろん、主要な136カ国に対応しています。</p>
</div>
<div class=\"left_content_text container-mobile\">
<p class=\"mb-8\">CHEETAH WiFiとは契約、返却や月額料金なし、必要な時に必要な分ギガを買い切りで追加チャージするだけですぐに利用できるポケットWiFiです。</p>
<p>追加できるギガは10GB・30GB・50GB・100GB、追加から365日間の有効期間があります。docomo・au・Softbankの３大キャリアはもちろん、主要な136カ国に対応しています。</p>
</div>
</div>
<div class=\"right_content\">
<img class=\"right_content_image\" src=\"";
// line 304
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/right_banner.png"), "html", null, true);
echo "\" alt=\"section-1\" loading=\"lazy\">
</div>
</div>
<div class=\"curved-background\"></div>
</div>

<div class=\"ranking-section\">
<div class=\"container-1200\">
<div class=\"title-base-header\">
<div class=\"title-base-subtitle\">
<img src=\"";
// line 315
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-ranking.svg"), "html", null, true);
echo "\" alt=\"Ranking\" class=\"title-base-icon\" loading=\"lazy\">
<span>人気ランキング</span>
</div>
<h2 class=\"title-base-title\">RANKING</h2>
</div>
";
// line 321
if ((twig_length_filter($this->env, (isset($context["top_ranking_products"]) || array_key_exists("top_ranking_products", $context) ? $context["top_ranking_products"] : (function () { throw new RuntimeError('Variable "top_ranking_products" does not exist.', 321, $this->source); })())) > 0)) {
// line 322
echo " ";
$context["firstProduct"] = twig_get_attribute($this->env, $this->source, (isset($context["top_ranking_products"]) || array_key_exists("top_ranking_products", $context) ? $context["top_ranking_products"] : (function () { throw new RuntimeError('Variable "top_ranking_products" does not exist.', 322, $this->source); })()), 0, [], "array", false, false, false, 322);
// line 323
echo " ";
$context["otherProducts"] = twig_slice($this->env, (isset($context["top_ranking_products"]) || array_key_exists("top_ranking_products", $context) ? $context["top_ranking_products"] : (function () { throw new RuntimeError('Variable "top_ranking_products" does not exist.', 323, $this->source); })()), 1, 4);
// line 324
echo "

<div class=\"ranking-main\">
<div class=\"ranking-card ranking-card--large\">
<a href=\"";
// line 328
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("product_detail", ["id" => twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 328, $this->source); })()), "id", [], "any", false, false, false, 328)]), "html", null, true);
echo "\">
<div class=\"ranking-card__image\">
<img src=\"";
// line 330
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($this->extensions['Eccube\Twig\Extension\EccubeExtension']->getNoImageProduct(twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 330, $this->source); })()), "main_list_image", [], "any", false, false, false, 330)), "save_image"), "html", null, true);
echo "\" alt=\"";
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 330, $this->source); })()), "name", [], "any", false, false, false, 330), "html", null, true);
echo "\" loading=\"lazy\">
</div>
</a>
<div class=\"ranking-card__badge\">No.1</div>
<div class=\"ranking-card__favorite\">
<img src=\"";
// line 335
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-heart.svg"), "html", null, true);
echo "\" alt=\"Favorite\" loading=\"lazy\">
</div>
</div>
<div class=\"ranking-info\">
<h3 class=\"ranking-info__title\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"";
// line 340
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 340, $this->source); })()), "name", [], "any", false, false, false, 340), "html", null, true);
echo "\">";
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 340, $this->source); })()), "name", [], "any", false, false, false, 340), "html", null, true);
echo "</h3>
<div class=\"ranking-info__price\">
<span class=\"price-symbol\">¥</span>
<span class=\"price-amount\">
";
// line 344
if (twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 344, $this->source); })()), "hasProductClass", [], "any", false, false, false, 344)) {
// line 345
echo " ";
if ((twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 345, $this->source); })()), "getPrice02IncTaxMin", [], "any", false, false, false, 345) == twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 345, $this->source); })()), "getPrice02IncTaxMax", [], "any", false, false, false, 345))) {
// line 346
echo " ";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 346, $this->source); })()), "getPrice02IncTaxMin", [], "any", false, false, false, 346)), "html", null, true);
echo "
";
} else {
// line 348
echo " ";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 348, $this->source); })()), "getPrice02IncTaxMin", [], "any", false, false, false, 348)), "html", null, true);
echo " ～ ";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 348, $this->source); })()), "getPrice02IncTaxMax", [], "any", false, false, false, 348)), "html", null, true);
echo "
";
}
// line 350
echo " ";
} else {
// line 351
echo " ";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 351, $this->source); })()), "getPrice02IncTaxMin", [], "any", false, false, false, 351)), "html", null, true);
echo "
";
}
// line 353
echo " </span>
<span class=\"price-tax\">(税込)</span>
</div>

<div class=\"ranking-view-more\">
<a href=\"";
// line 358
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("product_detail", ["id" => twig_get_attribute($this->env, $this->source, (isset($context["firstProduct"]) || array_key_exists("firstProduct", $context) ? $context["firstProduct"] : (function () { throw new RuntimeError('Variable "firstProduct" does not exist.', 358, $this->source); })()), "id", [], "any", false, false, false, 358)]), "html", null, true);
echo "\" class=\"btn-primary\">
<span>詳しくみる</span>
<img src=\"";
// line 360
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-right.svg"), "html", null, true);
echo "\" alt=\"Arrow\" class=\"btn-arrow\" loading=\"lazy\">
</a>
</div>
</div>
</div>

<div class=\"ranking-divider\"></div>

<div class=\"ranking-grid\">
";
// line 371
$context['_parent'] = $context;
$context['_seq'] = twig_ensure_traversable((isset($context["otherProducts"]) || array_key_exists("otherProducts", $context) ? $context["otherProducts"] : (function () { throw new RuntimeError('Variable "otherProducts" does not exist.', 371, $this->source); })()));
$context['loop'] = [
'parent' => $context['_parent'],
'index0' => 0,
'index' => 1,
'first' => true,
];
if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
$length = count($context['_seq']);
$context['loop']['revindex0'] = $length - 1;
$context['loop']['revindex'] = $length;
$context['loop']['length'] = $length;
$context['loop']['last'] = 1 === $length;
}
foreach ($context['_seq'] as $context["_key"] => $context["Product"]) {
// line 372
echo " <div class=\"ranking-item\">
<div class=\"ranking-card ranking-card--small\">
<a href=\"";
// line 374
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("product_detail", ["id" => twig_get_attribute($this->env, $this->source, $context["Product"], "id", [], "any", false, false, false, 374)]), "html", null, true);
echo "\">
<div class=\"ranking-card__image\">
<img src=\"";
// line 376
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($this->extensions['Eccube\Twig\Extension\EccubeExtension']->getNoImageProduct(twig_get_attribute($this->env, $this->source, $context["Product"], "main_list_image", [], "any", false, false, false, 376)), "save_image"), "html", null, true);
echo "\" alt=\"";
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Product"], "name", [], "any", false, false, false, 376), "html", null, true);
echo "\" loading=\"lazy\">
</div>
</a>
<div class=\"ranking-card__badge\">No.";
// line 379
echo twig_escape_filter($this->env, (twig_get_attribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 379) + 1), "html", null, true);
echo "</div>
<div class=\"ranking-card__favorite\">
<img src=\"";
// line 381
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-heart.svg"), "html", null, true);
echo "\" alt=\"Favorite\" loading=\"lazy\">
</div>
</div>
<div class=\"ranking-item__info\">
<a href=\"";
// line 385
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("product_detail", ["id" => twig_get_attribute($this->env, $this->source, $context["Product"], "id", [], "any", false, false, false, 385)]), "html", null, true);
echo "\">
<h4 class=\"ranking-item__title\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"";
// line 386
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Product"], "name", [], "any", false, false, false, 386), "html", null, true);
echo "\">";
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Product"], "name", [], "any", false, false, false, 386), "html", null, true);
echo "</h4>
</a>
<div class=\"ranking-item__price\">
<span class=\"price-symbol\">¥</span>
<span class=\"price-amount\">
";
// line 391
if (twig_get_attribute($this->env, $this->source, $context["Product"], "hasProductClass", [], "any", false, false, false, 391)) {
// line 392
echo " ";
if ((twig_get_attribute($this->env, $this->source, $context["Product"], "getPrice02IncTaxMin", [], "any", false, false, false, 392) == twig_get_attribute($this->env, $this->source, $context["Product"], "getPrice02IncTaxMax", [], "any", false, false, false, 392))) {
// line 393
echo " ";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Product"], "getPrice02IncTaxMin", [], "any", false, false, false, 393)), "html", null, true);
echo "
";
} else {
// line 395
echo " ";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Product"], "getPrice02IncTaxMin", [], "any", false, false, false, 395)), "html", null, true);
echo " ～ ";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Product"], "getPrice02IncTaxMax", [], "any", false, false, false, 395)), "html", null, true);
echo "
";
}
// line 397
echo " ";
} else {
// line 398
echo " ";
echo twig_escape_filter($this->env, twig_number_format_filter($this->env, twig_get_attribute($this->env, $this->source, $context["Product"], "getPrice02IncTaxMin", [], "any", false, false, false, 398)), "html", null, true);
echo "
";
}
// line 400
echo " </span>
<span class=\"price-tax\">(税込)</span>
</div>
</div>
</div>
";
++$context['loop']['index0'];
++$context['loop']['index'];
$context['loop']['first'] = false;
if (isset($context['loop']['length'])) {
--$context['loop']['revindex0'];
--$context['loop']['revindex'];
$context['loop']['last'] = 0 === $context['loop']['revindex0'];
}
}
$_parent = $context['_parent'];
unset($context['_seq'], $context['_iterated'], $context['_key'], $context['Product'], $context['_parent'], $context['loop']);
$context = array_intersect_key($context, $_parent) + $_parent;
// line 406
echo " </div>
";
} else {
// line 408
echo " 
";
}
// line 410
echo " </div>
</div>

<div class=\"banner-2\">
</div>

<div class=\"news-section\">
<div class=\"container-1200\">
<div class=\"news-header\">
<div class=\"news-title-wrapper\">
<div class=\"title-base-subtitle\" style=\"margin-top: 16px;\">
<img src=\"";
// line 423
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-news.svg"), "html", null, true);
echo "\" alt=\"News\" class=\"title-base-icon\" loading=\"lazy\">
<span>お知らせ</span>
</div>
<h2 class=\"title-base-title news-title-desktop\">NEWS</h2>
<a class=\"btn-primary news-list-btn news-list-btn-desktop\" href=\"";
// line 427
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("news_list");
echo "\">
<span>お知らせ一覧をみる</span>
<img src=\"";
// line 429
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-right-black.svg"), "html", null, true);
echo "\" alt=\"Arrow\" class=\"btn-arrow-black\" loading=\"lazy\">
</a>
</div>
<div class=\"news-list-wrapper pt-0\" id=\"news-list-id\">
";
// line 434
$context["NewsList"] = twig_slice($this->env, twig_get_attribute($this->env, $this->source, $this->env->getFunction('repository')->getCallable()("Eccube\\Entity\\News"), "getList", [], "method", false, false, false, 434), 0, 5);
// line 435
echo " <div class=\"news-list\">
";
// line 436
$context['_parent'] = $context;
$context['_seq'] = twig_ensure_traversable((isset($context["NewsList"]) || array_key_exists("NewsList", $context) ? $context["NewsList"] : (function () { throw new RuntimeError('Variable "NewsList" does not exist.', 436, $this->source); })()));
$context['_iterated'] = false;
foreach ($context['_seq'] as $context["_key"] => $context["News"]) {
// line 437
echo " <a href=\"";
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("news_detail", ["id" => twig_get_attribute($this->env, $this->source, $context["News"], "id", [], "any", false, false, false, 437)]), "html", null, true);
echo "\" class=\"news-item\">
<div class=\"news-date container-desktop\">";
// line 438
echo twig_escape_filter($this->env, twig_date_format_filter($this->env, twig_get_attribute($this->env, $this->source, $context["News"], "publishDate", [], "any", false, false, false, 438), "Y.m.d"), "html", null, true);
echo "</div>
<div class=\"news-title container-desktop text-black\">
<span class=\"text-black\">";
// line 440
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["News"], "title", [], "any", false, false, false, 440), "html", null, true);
echo "</span>
</div>
<div class=\"news-wrapper-mobile container-mobile\">
<div class=\"news-date news-date-mobile\">";
// line 443
echo twig_escape_filter($this->env, twig_date_format_filter($this->env, twig_get_attribute($this->env, $this->source, $context["News"], "publishDate", [], "any", false, false, false, 443), "Y.m.d"), "html", null, true);
echo "</div>
<div class=\"news-title news-title-mobile text-black\">
<span class=\"text-black\">";
// line 445
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["News"], "title", [], "any", false, false, false, 445), "html", null, true);
echo "</span>
</div>
</div>
<div class=\"news-arrow\">
<img src=\"";
// line 449
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-gray.svg"), "html", null, true);
echo "\" alt=\"Arrow\">
</div>
</a>
";
$context['_iterated'] = true;
}
if (!$context['_iterated']) {
// line 453
echo " <p class=\"no-news\">お知らせはありません。</p>
";
}
$_parent = $context['_parent'];
unset($context['_seq'], $context['_iterated'], $context['_key'], $context['News'], $context['_parent'], $context['loop']);
$context = array_intersect_key($context, $_parent) + $_parent;
// line 455
echo " </div>
</div>
<a class=\"btn-primary news-list-btn news-list-btn-mobile\" href=\"";
// line 458
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("news_list");
echo "\">
<span>お知らせ一覧をみる</span>
<img src=\"";
// line 460
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-right-black.svg"), "html", null, true);
echo "\" alt=\"Arrow\" class=\"btn-arrow-black\" loading=\"lazy\">
</a>
</div>
</div>
</div>

<div class=\"feature-section\">
<div class=\"container-1200\">
<div class=\"feature-header mt-120 mb-40\">
<div class=\"title-base-subtitle\">
<img src=\"";
// line 472
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-features.svg"), "html", null, true);
echo "\" alt=\"Feature\" class=\"title-base-icon\" loading=\"lazy\">
<span>サービスの特徴</span>
</div>
<h2 class=\"title-base-title\">FEATURES</h2>
</div>
</div>
<div class=\"container-1200 container-1200-desktop\">
<div class=\"feature-grid\">

<div class=\"feature-card\">
<div class=\"feature-card__icon\">
<img src=\"";
// line 485
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-yen.svg"), "html", null, true);
echo "\" alt=\"Yen\" loading=\"lazy\">
</div>
<div class=\"feature-card__content\">
<div class=\"feature-card__badge\">月額費用なし</div>
<p class=\"feature-card__description\">必要な時だけチャージして使用可能</p>
</div>
</div>

<div class=\"feature-card\">
<div class=\"feature-card__icon\">
<img src=\"";
// line 496
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-clock.svg"), "html", null, true);
echo "\" alt=\"Clock\" loading=\"lazy\">
</div>
<div class=\"feature-card__content\">
<div class=\"feature-card__badge\">即時チャージ対応</div>
<p class=\"feature-card__description\">マイページから24時間いつでも即チャージ</p>
</div>
</div>

<div class=\"feature-card\">
<div class=\"feature-card__icon\">
<img src=\"";
// line 507
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-easy.svg"), "html", null, true);
echo "\" alt=\"Easy\" loading=\"lazy\">
</div>
<div class=\"feature-card__content\">
<div class=\"feature-card__badge\">簡単すぐ使える</div>
<p class=\"feature-card__description\">面倒な手続き不要、届いたらすぐ利用可能</p>
</div>
</div>

<div class=\"feature-card\">
<div class=\"feature-card__icon\">
<img src=\"";
// line 518
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-world.svg"), "html", null, true);
echo "\" alt=\"World\" loading=\"lazy\">
</div>
<div class=\"feature-card__content\">
<div class=\"feature-card__badge\">世界130カ国対応</div>
<p class=\"feature-card__description\">海外でもそのまま使える</p>
</div>
</div>

<div class=\"feature-star\">
<img src=\"";
// line 528
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-star.svg"), "html", null, true);
echo "\" alt=\"Star\" loading=\"lazy\">
</div>
</div>
</div>
</div>

<div class=\"how-to-use-section\">
<div class=\"container-1200\">
<div class=\"how-to-use-wrapper mt-120 mb-40\">
<img class=\"how-to-use-header-image\" src=\"";
// line 538
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/how-to-use-header.png"), "html", null, true);
echo "\" alt=\"how-to-use-header\">
<div class=\"how-to-use-header mr-40\">
<div class=\"title-base-subtitle\">
<img src=\"";
// line 541
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-how-to-use.svg"), "html", null, true);
echo "\" alt=\"How to Use\" class=\"title-base-icon\">
<span>チャージ方法</span>
</div>
<h2 class=\"title-base-title\">HOW TO USE</h2>
</div>
<a href=\"";
// line 546
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("users_guide");
echo "\" class=\"btn-primary\">
<span>ご利用ガイドをみる</span>
<img src=\"";
// line 548
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-right-black.svg"), "html", null, true);
echo "\" alt=\"Arrow\" class=\"btn-arrow-black\">
</a>
</div>
</div>
<div class=\"how-to-use-slider container-1200\">
<div class=\"swiper howToUseSwiper\" id=\"howToUseSwiperId\">
<div class=\"swiper-wrapper\">

<div class=\"swiper-slide\">
<div class=\"step-card\">
<div class=\"step-card__header\">
<div class=\"step-card__badge\">STEP01</div>
<h3 class=\"step-card__title\">届いたその日から、すぐに使える</h3>
</div>
<div class=\"step-card__image\">
<img src=\"";
// line 565
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/slider-1.png"), "html", null, true);
echo "\" alt=\"Step 1\">
</div>
<p class=\"step-card__description\">初回購入時にデータがセットになっているため、端末が届いたら電源を入れるだけですぐにインターネットをご利用いただけます。面倒な開通手続きは一切ありません。</p>
</div>
</div>

<div class=\"swiper-slide\">
<div class=\"step-card\">
<div class=\"step-card__header\">
<div class=\"step-card__badge\">STEP02</div>
<h3 class=\"step-card__title\">データ残量はいつでも確認</h3>
</div>
<div class=\"step-card__image\">
<img src=\"";
// line 579
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/slider-2.png"), "html", null, true);
echo "\" alt=\"Step 2\">
</div>
<p class=\"step-card__description\">「あとどれくらい使えるかな？」と思ったら、24時間いつでもお客様専用の<a href=\"javascript:void(0);\" onclick=\"linkToMypage()\" class=\"\">マイページ</a>で現在のデータ残量をご確認いただけます。</p>
</div>
</div>

<div class=\"swiper-slide\">
<div class=\"step-card\">
<div class=\"step-card__header\">
<div class=\"step-card__badge\">STEP03</div>
<h3 class=\"step-card__title\">オンラインで手軽に追加チャージ</h3>
</div>
<div class=\"step-card__image\">
<img src=\"";
// line 593
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/slider-3.png"), "html", null, true);
echo "\" alt=\"Step 3\">
</div>
<p class=\"step-card__description\">データ残量が少なくなってきたら、<a href=\"javascript:void(0);\" onclick=\"linkToMypage()\" class=\"\">マイページ</a>から簡単に追加データを購入（チャージ）できます。お店へ行く必要もなく、すべてオンラインで完結します。</p>
</div>
</div>

<div class=\"swiper-slide\">
<div class=\"step-card\">
<div class=\"step-card__header\">
<div class=\"step-card__badge\">STEP04</div>
<h3 class=\"step-card__title\">購入後、待ち時間なしで即反映</h3>
</div>
<div class=\"step-card__image\">
<img src=\"";
// line 607
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/slider-4.png"), "html", null, true);
echo "\" alt=\"Step 4\">
</div>
<p class=\"step-card__description\">チャージしたデータは、購入手続き完了後すぐに反映されます。急にデータが必要になった時でも、待つことなくインターネットを使い続けられます。</p>
</div>
</div>
</div>
</div>

<div class=\"slider-controls\">

<div class=\"slider-progress\">
<div class=\"slider-progress-bar\"></div>
</div>

<div class=\"slider-navigation\">
<button class=\"slider-nav-btn slider-nav-prev\">
<img src=\"";
// line 626
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-left-nav.svg"), "html", null, true);
echo "\" alt=\"Previous\">
</button>
<button class=\"slider-nav-btn slider-nav-next\">
<img src=\"";
// line 629
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-right-nav.svg"), "html", null, true);
echo "\" alt=\"Next\">
</button>
</div>
</div>
</div>
</div>

<div class=\"my-page-section\">
<div class=\"container-1200\">
<div class=\"my-page-wrapper mt-120 mb-40\">
<img class=\"my-page-header-image container-desktop\" src=\"";
// line 640
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/my-page-header.png"), "html", null, true);
echo "\" alt=\"my-page-header\" loading=\"lazy\">
<div class=\"my-page-header mr-40\">
<div class=\"title-base-subtitle\">
<img src=\"";
// line 643
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-my-page.svg"), "html", null, true);
echo "\" alt=\"My Page\" class=\"title-base-icon\" loading=\"lazy\">
<span>マイページ機能について</span>
</div>
<h2 class=\"title-base-title\">MY PAGE</h2>
</div>
<a href=\"";
// line 648
echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("mypage");
echo "\" class=\"btn-primary\">
<span>マイページをみる</span>
<img src=\"";
// line 650
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-arrow-right-black.svg"), "html", null, true);
echo "\" alt=\"Arrow\" class=\"btn-arrow-black\" loading=\"lazy\">
</a>
</div>
<div class=\"my-page-grid\">

<div class=\"my-page-card\">
<div class=\"my-page-card__image\">
<img src=\"";
// line 657
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/my-page-1.png"), "html", null, true);
echo "\" alt=\"ギガのリチャージ\" loading=\"lazy\">
</div>
<div class=\"my-page-card__label\">ギガのリチャージ</div>
</div>

<div class=\"my-page-card\">
<div class=\"my-page-card__image\">
<img src=\"";
// line 665
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/my-page-2.png"), "html", null, true);
echo "\" alt=\"ギガ使用量、有効期間の確認\" loading=\"lazy\">
</div>
<div class=\"my-page-card__label\">ギガ使用量、有効期間の確認</div>
</div>

<div class=\"my-page-card\">
<div class=\"my-page-card__image\">
<img src=\"";
// line 673
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/my-page-3.png"), "html", null, true);
echo "\" alt=\"購入情報の確認\" loading=\"lazy\">
</div>
<div class=\"my-page-card__label\">購入情報の確認</div>
</div>

<div class=\"my-page-card\">
<div class=\"my-page-card__image\">
<img src=\"";
// line 681
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/my-page-4.png"), "html", null, true);
echo "\" alt=\"サポート\" loading=\"lazy\">
</div>
<div class=\"my-page-card__label\">サポート</div>
</div>
</div>
</div>
<img src=\"";
// line 687
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/my-page-header.png"), "html", null, true);
echo "\" alt=\"My Page\" class=\"my-page-header-mobile container-mobile\" loading=\"lazy\">
</div>

<div class=\"specifications-section\">
<div class=\"container-1200\">
<div class=\"specifications-header mt-120 mb-40\">
<div class=\"title-base-subtitle\">
<img src=\"";
// line 695
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/icons/icon-specifications.svg"), "html", null, true);
echo "\" alt=\"Specifications\" class=\"title-base-icon\" loading=\"lazy\">
<span>商品スペック・仕様</span>
</div>
<h2 class=\"title-base-title\">SPECIFICATIONS</h2>
</div>
<div class=\"specifications-wrapper\">
<div class=\"specifications-left\">
<div class=\"specifications-left-table mb-80\">

<div class=\"spec-table-header\">
<h3>端末スペック</h3>
</div>
<div class=\"spec-table-top\">
<div class=\"spec-table-top-item spec-table-top-item-active\" data-id=\"mr1\">
<div class=\"spec-table-top-item-text\">MR1</div>
</div>
<div class=\"spec-table-top-item\" data-id=\"u20\">
<div class=\"spec-table-top-item-text\">U20</div>
</div>
";
// line 720
echo " </div>

<div class=\"spec-table-body\" style=\"display: flex;\" id=\"spec_mr1\">
";
// line 724
$context["specs"] = [0 => ["label" => "最大接続数", "value" => "10台 (推奨5台)"], 1 => ["label" => "サイズ", "value" => "125×68×12mm"], 2 => ["label" => "重量", "value" => "約133g"], 3 => ["label" => "バッテリー", "value" => "3000mAh"], 4 => ["label" => "連続通信時間", "value" => "約13時間"], 5 => ["label" => "最大通信速度", "value" => "50Mbps/150Mbps"], 6 => ["label" => "USBポート", "value" => "Type-C（充電用）"], 7 => ["label" => "WCDMA", "value" => "バンド 1/2/4/5/8/19"], 8 => ["label" => "GSM", "value" => "850/900/1800/1900"], 9 => ["label" => "Wi-Fi", "value" => "IEEE802.11b/g/n"]];
// line 736
echo " ";
$context['_parent'] = $context;
$context['_seq'] = twig_ensure_traversable((isset($context["specs"]) || array_key_exists("specs", $context) ? $context["specs"] : (function () { throw new RuntimeError('Variable "specs" does not exist.', 736, $this->source); })()));
foreach ($context['_seq'] as $context["_key"] => $context["spec"]) {
// line 737
echo " <div class=\"spec-table-row";
if ((twig_get_attribute($this->env, $this->source, $context["spec"], "isLast", [], "any", true, true, false, 737) && twig_get_attribute($this->env, $this->source, $context["spec"], "isLast", [], "any", false, false, false, 737))) {
echo " spec-table-row--last";
}
echo "\">
<div class=\"spec-table-label\">";
// line 738
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["spec"], "label", [], "any", false, false, false, 738), "html", null, true);
echo "</div>
<div class=\"spec-table-value\">";
// line 739
echo twig_get_attribute($this->env, $this->source, $context["spec"], "value", [], "any", false, false, false, 739);
echo "</div>
</div>
";
}
$_parent = $context['_parent'];
unset($context['_seq'], $context['_iterated'], $context['_key'], $context['spec'], $context['_parent'], $context['loop']);
$context = array_intersect_key($context, $_parent) + $_parent;
// line 742
echo " </div>
<div class=\"spec-table-body\" style=\"display: none;\" id=\"spec_u20\">
";
// line 745
$context["specs"] = [0 => ["label" => "最大接続数", "value" => "8台（推奨5台）"], 1 => ["label" => "サイズ", "value" => "120×64×12mm"], 2 => ["label" => "重量", "value" => "約112g"], 3 => ["label" => "バッテリー", "value" => "3000mAh"], 4 => ["label" => "連続通信時間", "value" => "約13時間"], 5 => ["label" => "最大通信速度", "value" => "50Mbps/150Mbps"], 6 => ["label" => "USBポート", "value" => "Type-C（充電用）"], 7 => ["label" => "WCDMA", "value" => "バンド 1/2/4/5/8/"], 8 => ["label" => "GSM", "value" => "850/900/1800/1900"], 9 => ["label" => "Wi-Fi", "value" => "IEEE802.11b/g/n"]];
// line 757
echo " ";
$context['_parent'] = $context;
$context['_seq'] = twig_ensure_traversable((isset($context["specs"]) || array_key_exists("specs", $context) ? $context["specs"] : (function () { throw new RuntimeError('Variable "specs" does not exist.', 757, $this->source); })()));
foreach ($context['_seq'] as $context["_key"] => $context["spec"]) {
// line 758
echo " <div class=\"spec-table-row";
if ((twig_get_attribute($this->env, $this->source, $context["spec"], "isLast", [], "any", true, true, false, 758) && twig_get_attribute($this->env, $this->source, $context["spec"], "isLast", [], "any", false, false, false, 758))) {
echo " spec-table-row--last";
}
echo "\">
<div class=\"spec-table-label\">";
// line 759
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["spec"], "label", [], "any", false, false, false, 759), "html", null, true);
echo "</div>
<div class=\"spec-table-value\">";
// line 760
echo twig_get_attribute($this->env, $this->source, $context["spec"], "value", [], "any", false, false, false, 760);
echo "</div>
</div>
";
}
$_parent = $context['_parent'];
unset($context['_seq'], $context['_iterated'], $context['_key'], $context['spec'], $context['_parent'], $context['loop']);
$context = array_intersect_key($context, $_parent) + $_parent;
// line 763
echo " </div>
<div class=\"spec-table-body\" style=\"display: none;\" id=\"spec_u3\">
";
// line 766
$context["specs"] = [0 => ["label" => "最大接続数", "value" => "10台 (推奨 5台)"], 1 => ["label" => "サイズ", "value" => "126×68×12mm"], 2 => ["label" => "重量", "value" => "約125 g"], 3 => ["label" => "バッテリー", "value" => "3000mAh"], 4 => ["label" => "連続通信時間", "value" => "約12時間"], 5 => ["label" => "最大通信速度", "value" => "50Mbps/150Mbps"], 6 => ["label" => "USBポート", "value" => "Type-C (充電用)"], 7 => ["label" => "WCDMA", "value" => "バンド 1/2/4/5/6/8/9/19"], 8 => ["label" => "GSM", "value" => "850/900/1800/1900"], 9 => ["label" => "Wi-Fi", "value" => "IEEE802.11b/g/n"]];
// line 778
echo " ";
$context['_parent'] = $context;
$context['_seq'] = twig_ensure_traversable((isset($context["specs"]) || array_key_exists("specs", $context) ? $context["specs"] : (function () { throw new RuntimeError('Variable "specs" does not exist.', 778, $this->source); })()));
foreach ($context['_seq'] as $context["_key"] => $context["spec"]) {
// line 779
echo " <div class=\"spec-table-row";
if ((twig_get_attribute($this->env, $this->source, $context["spec"], "isLast", [], "any", true, true, false, 779) && twig_get_attribute($this->env, $this->source, $context["spec"], "isLast", [], "any", false, false, false, 779))) {
echo " spec-table-row--last";
}
echo "\">
<div class=\"spec-table-label\">";
// line 780
echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["spec"], "label", [], "any", false, false, false, 780), "html", null, true);
echo "</div>
<div class=\"spec-table-value\">";
// line 781
echo twig_get_attribute($this->env, $this->source, $context["spec"], "value", [], "any", false, false, false, 781);
echo "</div>
</div>
";
}
$_parent = $context['_parent'];
unset($context['_seq'], $context['_iterated'], $context['_key'], $context['spec'], $context['_parent'], $context['loop']);
$context = array_intersect_key($context, $_parent) + $_parent;
// line 784
echo " </div>
</div>
<div class=\"specifications-left-image container-desktop-768\">
<img src=\"";
// line 787
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/specifi.png"), "html", null, true);
echo "\" alt=\"Specifications Left Image\" loading=\"lazy\">
</div>
</div>
<div class=\"specifications-right\">
<div class=\"specifications-top-image container-mobile-768 container-1200-full-mobile\">
<img src=\"";
// line 792
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/specifi_left.png"), "html", null, true);
echo "\" alt=\"Specifications Left Image\" loading=\"lazy\">
</div>

<div class=\"product-card\">
<div class=\"product-card__image\">
<img src=\"";
// line 798
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/spec_1.png"), "html", null, true);
echo "\" alt=\"MR1\" loading=\"lazy\">
<div class=\"product-card__label\">MR1</div>
</div>
<p class=\"product-card__description\">契約不要、月額料金0円の国内外利用可能なクラウドSIM型Wi-Fiルーター３大キャリアに対応し、選べるギガをチャージして利用できます。</p>
</div>

<div class=\"product-card\">
<div class=\"product-card__image\">
<img src=\"";
// line 807
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/spec_2.png"), "html", null, true);
echo "\" alt=\"U20\" loading=\"lazy\">
<div class=\"product-card__label\">U20</div>
</div>
<p class=\"product-card__description\">MR1に比べ価格が安く、液晶をなくした事で軽量、薄型を実現し、持ち運びが便利になりました。5GB〜100GBからギガを選び、期間は50日、100日、365日から選べます。30日間無制限プランも用意しています。</p>
</div>

";
// line 821
echo "
<div class=\"specifications-bottom-image container-mobile-768 container-1200-full-mobile\">
<img src=\"";
// line 823
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/banner/specifi_right.png"), "html", null, true);
echo "\" alt=\"Specifications Right Image\" loading=\"lazy\">
</div>
</div>
</div>
</div>
</div>
<div class=\"text_footer_top\">
<img src=\"";
// line 831
echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/default/footer/footer-text-top.png"), "html", null, true);
echo "\" alt=\"Footer Text Top\" loading=\"lazy\">
</div>
";
$__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
$__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
}
public function getTemplateName()
{
return "index.twig";
}
public function isTraitable()
{
return false;
}
public function getDebugInfo()
{
return array ( 1383 => 831, 1372 => 823, 1368 => 821, 1358 => 807, 1346 => 798, 1337 => 792, 1329 => 787, 1324 => 784, 1315 => 781, 1311 => 780, 1304 => 779, 1299 => 778, 1297 => 766, 1292 => 763, 1283 => 760, 1279 => 759, 1272 => 758, 1267 => 757, 1265 => 745, 1260 => 742, 1251 => 739, 1247 => 738, 1240 => 737, 1235 => 736, 1233 => 724, 1227 => 720, 1204 => 695, 1193 => 687, 1184 => 681, 1173 => 673, 1162 => 665, 1151 => 657, 1141 => 650, 1136 => 648, 1128 => 643, 1122 => 640, 1108 => 629, 1102 => 626, 1080 => 607, 1063 => 593, 1046 => 579, 1029 => 565, 1009 => 548, 1004 => 546, 996 => 541, 990 => 538, 977 => 528, 964 => 518, 950 => 507, 936 => 496, 922 => 485, 906 => 472, 891 => 460, 886 => 458, 881 => 455, 874 => 453, 865 => 449, 858 => 445, 853 => 443, 847 => 440, 842 => 438, 837 => 437, 832 => 436, 829 => 435, 827 => 434, 819 => 429, 814 => 427, 807 => 423, 792 => 410, 788 => 408, 784 => 406, 765 => 400, 759 => 398, 756 => 397, 748 => 395, 742 => 393, 739 => 392, 737 => 391, 727 => 386, 723 => 385, 716 => 381, 711 => 379, 703 => 376, 698 => 374, 694 => 372, 677 => 371, 663 => 360, 658 => 358, 651 => 353, 645 => 351, 642 => 350, 634 => 348, 628 => 346, 625 => 345, 623 => 344, 614 => 340, 606 => 335, 596 => 330, 591 => 328, 585 => 324, 582 => 323, 579 => 322, 577 => 321, 568 => 315, 554 => 304, 540 => 293, 533 => 289, 527 => 285, 518 => 279, 512 => 276, 504 => 270, 490 => 264, 483 => 262, 479 => 260, 475 => 259, 470 => 256, 468 => 255, 453 => 243, 446 => 239, 442 => 238, 435 => 235, 429 => 233, 427 => 232, 423 => 231, 417 => 228, 412 => 227, 405 => 223, 401 => 222, 395 => 219, 390 => 218, 383 => 214, 379 => 213, 373 => 210, 368 => 209, 366 => 208, 358 => 203, 343 => 191, 337 => 188, 331 => 185, 328 => 184, 323 => 181, 317 => 178, 311 => 175, 305 => 171, 296 => 164, 290 => 161, 284 => 158, 281 => 157, 276 => 154, 270 => 151, 264 => 148, 258 => 144, 252 => 139, 250 => 138, 240 => 137, 118 => 24, 115 => 23, 105 => 22, 82 => 8, 78 => 7, 73 => 6, 63 => 5, 52 => 1, 50 => 3, 37 => 1,);
}
public function getSourceContext()
{
return new Source("{% extends 'default_frame.twig' %}
{% set body_class = 'front_page' %}
{% block stylesheet %}
<link rel=\"stylesheet\" href=\"{{ asset('assets/css/home.css') }}\">
<link rel=\"stylesheet\" href=\"{{ asset('assets/css/news-list.css') }}\">
<link rel=\"stylesheet\" href=\"{{ asset('assets/css/swiper-bundle.min.css') }}\" defer>
<style>
.header-section {
display: none;
}
@media (max-width: 1200px) {
.header-section {
display: block;
}
}
</style>
{% endblock %}
{% block javascript %}

<script src=\"{{ asset('assets/js/swiper-bundle.min.js') }}\" defer></script>
<script defer>
\$(document).ready(function() {
// Product Slider
// loop needs slides >= slidesPerView * 2 (max slidesPerView is 3)
if (document.getElementById('bannerSliderId')) {
const bannerSlideCount = document.querySelectorAll('#bannerSliderId .swiper-slide').length;
new Swiper('#bannerSliderId', {
slidesPerView: 3,
spaceBetween: 16,
loop: bannerSlideCount >= 6,
centeredSlides: false,
breakpoints: {
1200: {
slidesPerView: 3,
spaceBetween: 16,
},
768: {
slidesPerView: 3,
spaceBetween: 16,
},
0: {
centeredSlides: true,
slidesPerView: 1.2,
spaceBetween: 16,
}
},
pagination: {
el: '.productSlider-pagination',
clickable: true,
bulletClass: 'productSlider-bullet',
bulletActiveClass: 'productSlider-bullet-active',
},
navigation: {
nextEl: '.productSlider-button-next',
prevEl: '.productSlider-button-prev',
},
});
}
const howToUseSwiper = new Swiper('#howToUseSwiperId', {
slidesPerView: 'auto',
spaceBetween: 20,
centeredSlides: false,
grabCursor: true,
freeMode: {
enabled: true,
sticky: false,
},
navigation: {
nextEl: '.slider-nav-next',
prevEl: '.slider-nav-prev',
},
on: {
init: function() {
updateProgressBar(this);
},
progress: function(swiper, progress) {
updateProgressBar(swiper);
},
slideChange: function() {
updateProgressBar(this);
},
},
breakpoints: {
1200: {
spaceBetween: 20,
},
0: {
spaceBetween: 12,
}
},
});
function updateProgressBar(swiper) {
const progressBar = document.querySelector('.slider-progress-bar');
if (!progressBar) return;
// Calculate progress based on scroll position
// Start from 60% and scale to 100%
const progress = swiper.progress || 0;
const percentage = 60 + (progress * 40);
progressBar.style.width = Math.min(percentage, 100) + '%';
}
setTimeout(() => {
// Banner Slide - Pure CSS animation, no Swiper needed
// Banner Slide Text - Pure CSS animation, no Swiper needed
// click spec table top item
const specTableTopItems = document.querySelectorAll('.spec-table-top-item');
specTableTopItems.forEach(item => {
item.addEventListener('click', () => {
specTableTopItems.forEach(item => {
item.classList.remove('spec-table-top-item-active');
});
item.classList.add('spec-table-top-item-active');
// show spec table body
document.querySelectorAll('.spec-table-body').forEach(item => {
if (item.id !== `spec_\${item.dataset.id}`) {
item.style.display = 'none';
}
});
document.getElementById(`spec_\${item.dataset.id}`).style.display = 'flex';
});
});
}, 0);
});
</script>
{% endblock %}
{% block main %}
{% set totalQuantity = get_carts_total_quantity() %}

<div class=\"banner\">
{# banner slide image #}
<div class=\"banner-slide-swiper-wrapper\">
<div class=\"banner-slide-container\" id=\"bannerSlideContainerId\">
<div class=\"banner-slide-track\">
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_long.webp') }}\" alt=\"Banner Slide 1\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_long.webp') }}\" alt=\"Banner Slide 2\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_long.webp') }}\" alt=\"Banner Slide 3\" >
</div>
{# Duplicate for seamless loop #}
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_long.webp') }}\" alt=\"Banner Slide 1\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_long.webp') }}\" alt=\"Banner Slide 2\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_long.webp') }}\" alt=\"Banner Slide 3\" >
</div>
</div>
</div>
</div>
{# banner slide text #}
<div class=\"banner-slide-swiper-wrapper banner-slide-text-swiper-text\">
<div class=\"banner-slide-container\" id=\"bannerSlideTextContainerId\">
<div class=\"banner-slide-track banner-slide-track-reverse\">
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}\" alt=\"Banner Slide 1\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}\" alt=\"Banner Slide 2\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}\" alt=\"Banner Slide 3\" >
</div>
{# Duplicate for seamless loop #}
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}\" alt=\"Banner Slide 1\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}\" alt=\"Banner Slide 2\" >
</div>
<div class=\"banner-slide-item\">
<img class=\"banner-slide-image\" src=\"{{ asset('assets/img/default/banner/full_bg_bottom_long.png') }}\" alt=\"Banner Slide 3\" >
</div>
</div>
</div>
</div>

<div class=\"banner__text-left\">
</div>
<div class=\"container-desktop relative\">

<div class=\"banner__logo\">
<img src=\"{{ asset('assets/img/default/icons/logo.png') }}\" alt=\"Logo\">
</div>

<nav class=\"banner__nav\">
{% if is_granted('ROLE_USER') %}
<a href=\"{{ url('mypage') }}\" class=\"nav__item text-black\">
<img src=\"{{ asset('assets/img/default/icons/icon-user.svg') }}\" alt=\"User\" class=\"nav__icon\">
<span>マイページ</span>
</a>
<a href=\"{{ url('logout') }}\" class=\"nav__item text-black\">
<img src=\"{{ asset('assets/img/default/icons/icon-logout.svg') }}\" alt=\"Logout\" class=\"nav__icon\">
<span>ログアウト</span>
</a>
{% else %}
<a href=\"{{ url('entry') }}\" class=\"nav__item text-black\">
<img src=\"{{ asset('assets/img/default/icons/icon-edit.svg') }}\" alt=\"Register\" class=\"nav__icon\">
<span>会員登録</span>
</a>
<a href=\"{{ url('mypage_login') }}\" class=\"nav__item text-black\">
<img src=\"{{ asset('assets/img/default/icons/icon-lock.svg') }}\" alt=\"Login\" class=\"nav__icon\">
<span>ログイン</span>
</a>
{% endif %}
<a href=\"{{ url('product_list') }}\" class=\"nav__item nav__item--search text-black\">
<img src=\"{{ asset('assets/img/default/icons/icon-search.svg') }}\" alt=\"Search\" class=\"nav__icon\">
<span>商品を探す</span>
</a>
<a href=\"{{ url('cart') }}\" class=\"nav__item text-black relative\">
{% if totalQuantity > 0 %}
<span class=\"nav__item-badge\">{{ totalQuantity|number_format }}</span>
{% endif %}
<img src=\"{{ asset('assets/img/default/icons/icon-cart.svg') }}\" alt=\"Cart\" class=\"nav__icon\">
<span>カート</span>
</a>
<a href=\"{{ url('contact') }}\" class=\"nav__item text-black\">
<img src=\"{{ asset('assets/img/default/icons/icon-email.svg') }}\" alt=\"Contact\" class=\"nav__icon\">
<span>お問い合わせ</span>
</a>
<a href=\"javascript:void(0);\" onclick=\"linkToMypage()\" class=\"nav__item nav__item--primary\">
<img src=\"{{ asset('assets/img/default/icons/icon-charger.svg') }}\" alt=\"Charge\" class=\"nav__icon\">
<span>ギガをチャージ</span>
</a>
</nav>
</div>

<div class=\"banner__text-right\">
</div>
</div>

{% if banners|length > 0 %}
<div class=\"slider\">
<div class=\"swiper productSlider\" id=\"bannerSliderId\">
<div class=\"swiper-wrapper\">
{% for Banner in banners %}
<div class=\"swiper-slide\">
<div class=\"slider__card\">
<a onclick=\"if ('{{ Banner.linkUrl }}') { window.open('{{ Banner.linkUrl }}', '_blank') }\">
<div class=\"slider__card-image\">
<img src=\"{{ asset(Banner.imagePath, 'save_image') }}\" alt=\"{{ Banner.title }}\">
</div>
</a>
</div>
</div>
{% endfor %}
</div>

<div class=\"swiper-pagination productSlider-pagination\"></div>

<div class=\"productSlider-navigation\">
<button class=\"productSlider-button productSlider-button-prev\">
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-left-nav.svg') }}\" alt=\"Previous\">
</button>
<button class=\"productSlider-button productSlider-button-next\">
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-right-nav.svg') }}\" alt=\"Next\">
</button>
</div>
</div>
</div>
{% endif %}

<div class=\"section-1\">
<div class=\"top-image-mobile\">
<img src=\"{{ asset('assets/img/default/banner/right_banner.png') }}\" alt=\"section-1\" loading=\"lazy\">
</div>
<div class=\"section-1-wrapper container-1200\">
<div class=\"left_content\">
<img class=\"left_content_image\" src=\"{{ asset('assets/img/default/banner/top_banner.png') }}\" alt=\"section-1\" loading=\"lazy\">
<div class=\"left_content_text container-desktop\">
<p class=\"mb-8\">CHEETAH WiFiとは契約、返却や月額料金なし、必要な時に必要な分ギガを買い切りで追加<br>チャージするだけですぐに利用できるポケットWiFiです。</p>
<p>追加できるギガは10GB・30GB・50GB・100GB、追加から365日間の有効期間があります。docomo・au・Softbankの３大キャリアはもちろん、主要な136カ国に対応しています。</p>
</div>
<div class=\"left_content_text container-mobile\">
<p class=\"mb-8\">CHEETAH WiFiとは契約、返却や月額料金なし、必要な時に必要な分ギガを買い切りで追加チャージするだけですぐに利用できるポケットWiFiです。</p>
<p>追加できるギガは10GB・30GB・50GB・100GB、追加から365日間の有効期間があります。docomo・au・Softbankの３大キャリアはもちろん、主要な136カ国に対応しています。</p>
</div>
</div>
<div class=\"right_content\">
<img class=\"right_content_image\" src=\"{{ asset('assets/img/default/banner/right_banner.png') }}\" alt=\"section-1\" loading=\"lazy\">
</div>
</div>
<div class=\"curved-background\"></div>
</div>

<div class=\"ranking-section\">
<div class=\"container-1200\">
<div class=\"title-base-header\">
<div class=\"title-base-subtitle\">
<img src=\"{{ asset('assets/img/default/icons/icon-ranking.svg') }}\" alt=\"Ranking\" class=\"title-base-icon\" loading=\"lazy\">
<span>人気ランキング</span>
</div>
<h2 class=\"title-base-title\">RANKING</h2>
</div>
{% if top_ranking_products|length > 0 %}
{% set firstProduct = top_ranking_products[0] %}
{% set otherProducts = top_ranking_products|slice(1, 4) %}

<div class=\"ranking-main\">
<div class=\"ranking-card ranking-card--large\">
<a href=\"{{ url('product_detail', {'id': firstProduct.id}) }}\">
<div class=\"ranking-card__image\">
<img src=\"{{ asset(firstProduct.main_list_image|no_image_product, 'save_image') }}\" alt=\"{{ firstProduct.name }}\" loading=\"lazy\">
</div>
</a>
<div class=\"ranking-card__badge\">No.1</div>
<div class=\"ranking-card__favorite\">
<img src=\"{{ asset('assets/img/default/icons/icon-heart.svg') }}\" alt=\"Favorite\" loading=\"lazy\">
</div>
</div>
<div class=\"ranking-info\">
<h3 class=\"ranking-info__title\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"{{ firstProduct.name }}\">{{ firstProduct.name }}</h3>
<div class=\"ranking-info__price\">
<span class=\"price-symbol\">¥</span>
<span class=\"price-amount\">
{% if firstProduct.hasProductClass %}
{% if firstProduct.getPrice02IncTaxMin == firstProduct.getPrice02IncTaxMax %}
{{ firstProduct.getPrice02IncTaxMin|number_format }}
{% else %}
{{ firstProduct.getPrice02IncTaxMin|number_format }} ～ {{ firstProduct.getPrice02IncTaxMax|number_format }}
{% endif %}
{% else %}
{{ firstProduct.getPrice02IncTaxMin|number_format }}
{% endif %}
</span>
<span class=\"price-tax\">(税込)</span>
</div>

<div class=\"ranking-view-more\">
<a href=\"{{ url('product_detail', {'id': firstProduct.id}) }}\" class=\"btn-primary\">
<span>詳しくみる</span>
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-right.svg') }}\" alt=\"Arrow\" class=\"btn-arrow\" loading=\"lazy\">
</a>
</div>
</div>
</div>

<div class=\"ranking-divider\"></div>

<div class=\"ranking-grid\">
{% for Product in otherProducts %}
<div class=\"ranking-item\">
<div class=\"ranking-card ranking-card--small\">
<a href=\"{{ url('product_detail', {'id': Product.id}) }}\">
<div class=\"ranking-card__image\">
<img src=\"{{ asset(Product.main_list_image|no_image_product, 'save_image') }}\" alt=\"{{ Product.name }}\" loading=\"lazy\">
</div>
</a>
<div class=\"ranking-card__badge\">No.{{ loop.index + 1 }}</div>
<div class=\"ranking-card__favorite\">
<img src=\"{{ asset('assets/img/default/icons/icon-heart.svg') }}\" alt=\"Favorite\" loading=\"lazy\">
</div>
</div>
<div class=\"ranking-item__info\">
<a href=\"{{ url('product_detail', {'id': Product.id}) }}\">
<h4 class=\"ranking-item__title\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"{{ Product.name }}\">{{ Product.name }}</h4>
</a>
<div class=\"ranking-item__price\">
<span class=\"price-symbol\">¥</span>
<span class=\"price-amount\">
{% if Product.hasProductClass %}
{% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
{{ Product.getPrice02IncTaxMin|number_format }}
{% else %}
{{ Product.getPrice02IncTaxMin|number_format }} ～ {{ Product.getPrice02IncTaxMax|number_format }}
{% endif %}
{% else %}
{{ Product.getPrice02IncTaxMin|number_format }}
{% endif %}
</span>
<span class=\"price-tax\">(税込)</span>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}

{% endif %}
</div>
</div>

<div class=\"banner-2\">
</div>

<div class=\"news-section\">
<div class=\"container-1200\">
<div class=\"news-header\">
<div class=\"news-title-wrapper\">
<div class=\"title-base-subtitle\" style=\"margin-top: 16px;\">
<img src=\"{{ asset('assets/img/default/icons/icon-news.svg') }}\" alt=\"News\" class=\"title-base-icon\" loading=\"lazy\">
<span>お知らせ</span>
</div>
<h2 class=\"title-base-title news-title-desktop\">NEWS</h2>
<a class=\"btn-primary news-list-btn news-list-btn-desktop\" href=\"{{ url('news_list') }}\">
<span>お知らせ一覧をみる</span>
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}\" alt=\"Arrow\" class=\"btn-arrow-black\" loading=\"lazy\">
</a>
</div>
<div class=\"news-list-wrapper pt-0\" id=\"news-list-id\">
{% set NewsList = repository('Eccube\\\\Entity\\\\News').getList()|slice(0, 5) %}
<div class=\"news-list\">
{% for News in NewsList %}
<a href=\"{{ url('news_detail', {id: News.id}) }}\" class=\"news-item\">
<div class=\"news-date container-desktop\">{{ News.publishDate|date('Y.m.d') }}</div>
<div class=\"news-title container-desktop text-black\">
<span class=\"text-black\">{{ News.title }}</span>
</div>
<div class=\"news-wrapper-mobile container-mobile\">
<div class=\"news-date news-date-mobile\">{{ News.publishDate|date('Y.m.d') }}</div>
<div class=\"news-title news-title-mobile text-black\">
<span class=\"text-black\">{{ News.title }}</span>
</div>
</div>
<div class=\"news-arrow\">
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-gray.svg') }}\" alt=\"Arrow\">
</div>
</a>
{% else %}
<p class=\"no-news\">お知らせはありません。</p>
{% endfor %}
</div>
</div>
<a class=\"btn-primary news-list-btn news-list-btn-mobile\" href=\"{{ url('news_list') }}\">
<span>お知らせ一覧をみる</span>
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}\" alt=\"Arrow\" class=\"btn-arrow-black\" loading=\"lazy\">
</a>
</div>
</div>
</div>

<div class=\"feature-section\">
<div class=\"container-1200\">
<div class=\"feature-header mt-120 mb-40\">
<div class=\"title-base-subtitle\">
<img src=\"{{ asset('assets/img/default/icons/icon-features.svg') }}\" alt=\"Feature\" class=\"title-base-icon\" loading=\"lazy\">
<span>サービスの特徴</span>
</div>
<h2 class=\"title-base-title\">FEATURES</h2>
</div>
</div>
<div class=\"container-1200 container-1200-desktop\">
<div class=\"feature-grid\">

<div class=\"feature-card\">
<div class=\"feature-card__icon\">
<img src=\"{{ asset('assets/img/default/icons/icon-yen.svg') }}\" alt=\"Yen\" loading=\"lazy\">
</div>
<div class=\"feature-card__content\">
<div class=\"feature-card__badge\">月額費用なし</div>
<p class=\"feature-card__description\">必要な時だけチャージして使用可能</p>
</div>
</div>

<div class=\"feature-card\">
<div class=\"feature-card__icon\">
<img src=\"{{ asset('assets/img/default/icons/icon-clock.svg') }}\" alt=\"Clock\" loading=\"lazy\">
</div>
<div class=\"feature-card__content\">
<div class=\"feature-card__badge\">即時チャージ対応</div>
<p class=\"feature-card__description\">マイページから24時間いつでも即チャージ</p>
</div>
</div>

<div class=\"feature-card\">
<div class=\"feature-card__icon\">
<img src=\"{{ asset('assets/img/default/icons/icon-easy.svg') }}\" alt=\"Easy\" loading=\"lazy\">
</div>
<div class=\"feature-card__content\">
<div class=\"feature-card__badge\">簡単すぐ使える</div>
<p class=\"feature-card__description\">面倒な手続き不要、届いたらすぐ利用可能</p>
</div>
</div>

<div class=\"feature-card\">
<div class=\"feature-card__icon\">
<img src=\"{{ asset('assets/img/default/icons/icon-world.svg') }}\" alt=\"World\" loading=\"lazy\">
</div>
<div class=\"feature-card__content\">
<div class=\"feature-card__badge\">世界130カ国対応</div>
<p class=\"feature-card__description\">海外でもそのまま使える</p>
</div>
</div>

<div class=\"feature-star\">
<img src=\"{{ asset('assets/img/default/icons/icon-star.svg') }}\" alt=\"Star\" loading=\"lazy\">
</div>
</div>
</div>
</div>

<div class=\"how-to-use-section\">
<div class=\"container-1200\">
<div class=\"how-to-use-wrapper mt-120 mb-40\">
<img class=\"how-to-use-header-image\" src=\"{{ asset('assets/img/default/banner/how-to-use-header.png') }}\" alt=\"how-to-use-header\">
<div class=\"how-to-use-header mr-40\">
<div class=\"title-base-subtitle\">
<img src=\"{{ asset('assets/img/default/icons/icon-how-to-use.svg') }}\" alt=\"How to Use\" class=\"title-base-icon\">
<span>チャージ方法</span>
</div>
<h2 class=\"title-base-title\">HOW TO USE</h2>
</div>
<a href=\"{{ url('users_guide') }}\" class=\"btn-primary\">
<span>ご利用ガイドをみる</span>
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}\" alt=\"Arrow\" class=\"btn-arrow-black\">
</a>
</div>
</div>
<div class=\"how-to-use-slider container-1200\">
<div class=\"swiper howToUseSwiper\" id=\"howToUseSwiperId\">
<div class=\"swiper-wrapper\">

<div class=\"swiper-slide\">
<div class=\"step-card\">
<div class=\"step-card__header\">
<div class=\"step-card__badge\">STEP01</div>
<h3 class=\"step-card__title\">届いたその日から、すぐに使える</h3>
</div>
<div class=\"step-card__image\">
<img src=\"{{ asset('assets/img/default/banner/slider-1.png') }}\" alt=\"Step 1\">
</div>
<p class=\"step-card__description\">初回購入時にデータがセットになっているため、端末が届いたら電源を入れるだけですぐにインターネットをご利用いただけます。面倒な開通手続きは一切ありません。</p>
</div>
</div>

<div class=\"swiper-slide\">
<div class=\"step-card\">
<div class=\"step-card__header\">
<div class=\"step-card__badge\">STEP02</div>
<h3 class=\"step-card__title\">データ残量はいつでも確認</h3>
</div>
<div class=\"step-card__image\">
<img src=\"{{ asset('assets/img/default/banner/slider-2.png') }}\" alt=\"Step 2\">
</div>
<p class=\"step-card__description\">「あとどれくらい使えるかな？」と思ったら、24時間いつでもお客様専用の<a href=\"javascript:void(0);\" onclick=\"linkToMypage()\" class=\"\">マイページ</a>で現在のデータ残量をご確認いただけます。</p>
</div>
</div>

<div class=\"swiper-slide\">
<div class=\"step-card\">
<div class=\"step-card__header\">
<div class=\"step-card__badge\">STEP03</div>
<h3 class=\"step-card__title\">オンラインで手軽に追加チャージ</h3>
</div>
<div class=\"step-card__image\">
<img src=\"{{ asset('assets/img/default/banner/slider-3.png') }}\" alt=\"Step 3\">
</div>
<p class=\"step-card__description\">データ残量が少なくなってきたら、<a href=\"javascript:void(0);\" onclick=\"linkToMypage()\" class=\"\">マイページ</a>から簡単に追加データを購入（チャージ）できます。お店へ行く必要もなく、すべてオンラインで完結します。</p>
</div>
</div>

<div class=\"swiper-slide\">
<div class=\"step-card\">
<div class=\"step-card__header\">
<div class=\"step-card__badge\">STEP04</div>
<h3 class=\"step-card__title\">購入後、待ち時間なしで即反映</h3>
</div>
<div class=\"step-card__image\">
<img src=\"{{ asset('assets/img/default/banner/slider-4.png') }}\" alt=\"Step 4\">
</div>
<p class=\"step-card__description\">チャージしたデータは、購入手続き完了後すぐに反映されます。急にデータが必要になった時でも、待つことなくインターネットを使い続けられます。</p>
</div>
</div>
</div>
</div>

<div class=\"slider-controls\">

<div class=\"slider-progress\">
<div class=\"slider-progress-bar\"></div>
</div>

<div class=\"slider-navigation\">
<button class=\"slider-nav-btn slider-nav-prev\">
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-left-nav.svg') }}\" alt=\"Previous\">
</button>
<button class=\"slider-nav-btn slider-nav-next\">
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-right-nav.svg') }}\" alt=\"Next\">
</button>
</div>
</div>
</div>
</div>

<div class=\"my-page-section\">
<div class=\"container-1200\">
<div class=\"my-page-wrapper mt-120 mb-40\">
<img class=\"my-page-header-image container-desktop\" src=\"{{ asset('assets/img/default/banner/my-page-header.png') }}\" alt=\"my-page-header\" loading=\"lazy\">
<div class=\"my-page-header mr-40\">
<div class=\"title-base-subtitle\">
<img src=\"{{ asset('assets/img/default/icons/icon-my-page.svg') }}\" alt=\"My Page\" class=\"title-base-icon\" loading=\"lazy\">
<span>マイページ機能について</span>
</div>
<h2 class=\"title-base-title\">MY PAGE</h2>
</div>
<a href=\"{{ url('mypage') }}\" class=\"btn-primary\">
<span>マイページをみる</span>
<img src=\"{{ asset('assets/img/default/icons/icon-arrow-right-black.svg') }}\" alt=\"Arrow\" class=\"btn-arrow-black\" loading=\"lazy\">
</a>
</div>
<div class=\"my-page-grid\">

<div class=\"my-page-card\">
<div class=\"my-page-card__image\">
<img src=\"{{ asset('assets/img/default/banner/my-page-1.png') }}\" alt=\"ギガのリチャージ\" loading=\"lazy\">
</div>
<div class=\"my-page-card__label\">ギガのリチャージ</div>
</div>

<div class=\"my-page-card\">
<div class=\"my-page-card__image\">
<img src=\"{{ asset('assets/img/default/banner/my-page-2.png') }}\" alt=\"ギガ使用量、有効期間の確認\" loading=\"lazy\">
</div>
<div class=\"my-page-card__label\">ギガ使用量、有効期間の確認</div>
</div>

<div class=\"my-page-card\">
<div class=\"my-page-card__image\">
<img src=\"{{ asset('assets/img/default/banner/my-page-3.png') }}\" alt=\"購入情報の確認\" loading=\"lazy\">
</div>
<div class=\"my-page-card__label\">購入情報の確認</div>
</div>

<div class=\"my-page-card\">
<div class=\"my-page-card__image\">
<img src=\"{{ asset('assets/img/default/banner/my-page-4.png') }}\" alt=\"サポート\" loading=\"lazy\">
</div>
<div class=\"my-page-card__label\">サポート</div>
</div>
</div>
</div>
<img src=\"{{ asset('assets/img/default/banner/my-page-header.png') }}\" alt=\"My Page\" class=\"my-page-header-mobile container-mobile\" loading=\"lazy\">
</div>

<div class=\"specifications-section\">
<div class=\"container-1200\">
<div class=\"specifications-header mt-120 mb-40\">
<div class=\"title-base-subtitle\">
<img src=\"{{ asset('assets/img/default/icons/icon-specifications.svg') }}\" alt=\"Specifications\" class=\"title-base-icon\" loading=\"lazy\">
<span>商品スペック・仕様</span>
</div>
<h2 class=\"title-base-title\">SPECIFICATIONS</h2>
</div>
<div class=\"specifications-wrapper\">
<div class=\"specifications-left\">
<div class=\"specifications-left-table mb-80\">

<div class=\"spec-table-header\">
<h3>端末スペック</h3>
</div>
<div class=\"spec-table-top\">
<div class=\"spec-table-top-item spec-table-top-item-active\" data-id=\"mr1\">
<div class=\"spec-table-top-item-text\">MR1</div>
</div>
<div class=\"spec-table-top-item\" data-id=\"u20\">
<div class=\"spec-table-top-item-text\">U20</div>
</div>
{# TODO: tạm ẩn U3
<div class=\"spec-table-top-item\" data-id=\"u3\">
<div class=\"spec-table-top-item-text\">U3</div>
</div>
#}
</div>

<div class=\"spec-table-body\" style=\"display: flex;\" id=\"spec_mr1\">
{% set specs = [
{ label: '最大接続数', value: '10台 (推奨5台)' },
{ label: 'サイズ', value: '125×68×12mm' },
{ label: '重量', value: '約133g' },
{ label: 'バッテリー', value: '3000mAh' },
{ label: '連続通信時間', value: '約13時間' },
{ label: '最大通信速度', value: '50Mbps/150Mbps' },
{ label: 'USBポート', value: 'Type-C（充電用）' },
{ label: 'WCDMA', value: 'バンド 1/2/4/5/8/19' },
{ label: 'GSM', value: '850/900/1800/1900' },
{ label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
] %}
{% for spec in specs %}
<div class=\"spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}\">
<div class=\"spec-table-label\">{{ spec.label }}</div>
<div class=\"spec-table-value\">{{ spec.value|raw }}</div>
</div>
{% endfor %}
</div>
<div class=\"spec-table-body\" style=\"display: none;\" id=\"spec_u20\">
{% set specs = [
{ label: '最大接続数', value: '8台（推奨5台）' },
{ label: 'サイズ', value: '120×64×12mm' },
{ label: '重量', value: '約112g' },
{ label: 'バッテリー', value: '3000mAh' },
{ label: '連続通信時間', value: '約13時間' },
{ label: '最大通信速度', value: '50Mbps/150Mbps' },
{ label: 'USBポート', value: 'Type-C（充電用）' },
{ label: 'WCDMA', value: 'バンド 1/2/4/5/8/' },
{ label: 'GSM', value: '850/900/1800/1900' },
{ label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
] %}
{% for spec in specs %}
<div class=\"spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}\">
<div class=\"spec-table-label\">{{ spec.label }}</div>
<div class=\"spec-table-value\">{{ spec.value|raw }}</div>
</div>
{% endfor %}
</div>
<div class=\"spec-table-body\" style=\"display: none;\" id=\"spec_u3\">
{% set specs = [
{ label: '最大接続数', value: '10台 (推奨 5台)' },
{ label: 'サイズ', value: '126×68×12mm' },
{ label: '重量', value: '約125 g' },
{ label: 'バッテリー', value: '3000mAh' },
{ label: '連続通信時間', value: '約12時間' },
{ label: '最大通信速度', value: '50Mbps/150Mbps' },
{ label: 'USBポート', value: 'Type-C (充電用)' },
{ label: 'WCDMA', value: 'バンド 1/2/4/5/6/8/9/19' },
{ label: 'GSM', value: '850/900/1800/1900' },
{ label: 'Wi-Fi', value: 'IEEE802.11b/g/n' }
] %}
{% for spec in specs %}
<div class=\"spec-table-row{% if spec.isLast is defined and spec.isLast %} spec-table-row--last{% endif %}\">
<div class=\"spec-table-label\">{{ spec.label }}</div>
<div class=\"spec-table-value\">{{ spec.value|raw }}</div>
</div>
{% endfor %}
</div>
</div>
<div class=\"specifications-left-image container-desktop-768\">
<img src=\"{{ asset('assets/img/default/banner/specifi.png') }}\" alt=\"Specifications Left Image\" loading=\"lazy\">
</div>
</div>
<div class=\"specifications-right\">
<div class=\"specifications-top-image container-mobile-768 container-1200-full-mobile\">
<img src=\"{{ asset('assets/img/default/banner/specifi_left.png') }}\" alt=\"Specifications Left Image\" loading=\"lazy\">
</div>

<div class=\"product-card\">
<div class=\"product-card__image\">
<img src=\"{{ asset('assets/img/default/banner/spec_1.png') }}\" alt=\"MR1\" loading=\"lazy\">
<div class=\"product-card__label\">MR1</div>
</div>
<p class=\"product-card__description\">契約不要、月額料金0円の国内外利用可能なクラウドSIM型Wi-Fiルーター３大キャリアに対応し、選べるギガをチャージして利用できます。</p>
</div>

<div class=\"product-card\">
<div class=\"product-card__image\">
<img src=\"{{ asset('assets/img/default/banner/spec_2.png') }}\" alt=\"U20\" loading=\"lazy\">
<div class=\"product-card__label\">U20</div>
</div>
<p class=\"product-card__description\">MR1に比べ価格が安く、液晶をなくした事で軽量、薄型を実現し、持ち運びが便利になりました。5GB〜100GBからギガを選び、期間は50日、100日、365日から選べます。30日間無制限プランも用意しています。</p>
</div>

{# <div class=\"product-card\">
<div class=\"product-card__image\">
<img src=\"{{ asset('assets/img/default/banner/spec_3.png') }}\" alt=\"U3\" loading=\"lazy\">
<div class=\"product-card__label\">U3</div>
</div>
<p class=\"product-card__description\">U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。U3の特徴が入ります。</p>
</div> #}
<div class=\"specifications-bottom-image container-mobile-768 container-1200-full-mobile\">
<img src=\"{{ asset('assets/img/default/banner/specifi_right.png') }}\" alt=\"Specifications Right Image\" loading=\"lazy\">
</div>
</div>
</div>
</div>
</div>
<div class=\"text_footer_top\">
<img src=\"{{ asset('assets/img/default/footer/footer-text-top.png') }}\" alt=\"Footer Text Top\" loading=\"lazy\">
</div>
{% endblock %}
", "index.twig", "/var/www/html/app/template/default/index.twig");
}
}

var/cache/dev/twig/da/da88b69174ab65fd241ef6628b00a997f9ca6e58166b47040f03ff400ac5dd45.php line 40