var/cache/dev/twig/f1/f174744851757715e549c3a1402e5a01388a0db988509e9759d6a2aec3dd3211.php line 48

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* Help/about_cocofuru.twig */
  16. class __TwigTemplate_8e5fd9548afc0d80ac9b5e7d54871b57e4cf7d2ce64b8110c05076c4a061e322 extends \Eccube\Twig\Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->blocks = [
  28.             'main' => [$this, 'block_main'],
  29.         ];
  30.     }
  32.     protected function doGetParent(array $context)
  33.     {
  34.         // line 1
  35.         return "default_frame.twig";
  36.     }
  38.     protected function doDisplay(array $context, array $blocks = [])
  39.     {
  40.         $macros = $this->macros;
  41.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  42.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Help/about_cocofuru.twig"));
  44.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  45.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Help/about_cocofuru.twig"));
  47.         $this->parent = $this->loadTemplate("default_frame.twig", "Help/about_cocofuru.twig", 1);
  48.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  49.         
  50.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  52.         
  53.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  55.     }
  57.     // line 3
  58.     public function block_main($context, array $blocks = [])
  59.     {
  60.         $macros = $this->macros;
  61.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  62.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  64.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  65.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "main"));
  67.         // line 4
  68.         echo "
  69. <style>
  70.     html {
  71.       scroll-behavior: smooth;
  72.     }
  73.     img {
  74.         max-width: 100%;
  75.     }
  76.     ul {
  77.         list-style: none;
  78.         margin: 0;
  79.         padding: 0;
  80.     }
  81.     .page-contents {
  82.         max-width: 1150px;
  83.         margin: 0 auto;
  84.     }
  85.     .container {
  86.         width: min(100% - 15px, 1720px);
  87.         margin-inline: auto;
  88.         padding-right: 5px;
  89.         padding-left: 5px;
  90.     }
  91.     .page-section {
  92.         max-width: 1600px;
  93.         padding: 100px 0 80px 0;
  94.         margin-inline: auto;
  95.     }
  96.     @media(max-width:991px) {
  97.         .page-section {
  98.             padding: 40px 0 40px 0;
  99.         }
  100.     }
  101.     .page-heading {
  102.         width: min(100% - 30px, 1840px);
  103.         margin-inline: auto;
  104.         padding: 80px 0 10px 0;
  105.         margin-bottom: 60px;
  106.         border-bottom: solid 1px #707070;
  107.     }
  108.     @media(max-width:991px) {
  109.         .page-heading {
  110.             padding: 40px 0 10px 0;
  111.             margin-bottom: 40px;
  112.         }
  113.     }
  114.     @media(max-width:480px) {
  115.         .page-heading {
  116.             border-top: solid 1px #707070;
  117.             padding: 8px 0 8px 0;
  118.             margin-bottom:10px;
  119.         }
  120.     }
  121.     .page-title {
  122.         max-width: 1720px;
  123.         font-size: max(20px, min(3.8vw,30px) );
  124.         font-weight: 600;
  125.         color: #707070;
  126.         margin: 0 auto;
  127.         line-height: 1.4;
  128.     }
  129.     .section-heading {
  130.         display: inline-block;
  131.         font-size: max(24px, min(3vw,16px) );
  132.         font-weight: 600;
  133.         color: #fff;
  134.         background: #000;
  135.         border-radius: 60px;
  136.         padding: 28px;
  137.         margin: 0 0 50px 0;
  138.     }
  139.     @media(max-width:480px) {
  140.         .section-heading {
  141.             display: none;
  142.         }
  143.     }
  144.     /*MV*/
  145.     .cocofuru-mv {
  146.         margin-right: calc(50% - 50vw);
  147.         margin-left: calc(50% - 50vw);
  148.     }
  149.     .mv-photo {
  150.         width: 100%;
  151.     }
  152.     @media(max-width:480px) {
  153.         .cocofuru-mv {
  154.             display: none;
  155.         }
  156.     }
  157.     /*ページナビ*/
  158.     .page-nav {
  159.         display: flex;
  160.         background: #e3e3e3;
  161.     }
  162.     .page-nav__item {
  163.         flex: 1;
  164.         position: relative;
  165.         display: flex;
  166.         align-items: center;
  167.     }
  168.     .page-nav__item:not(:last-of-type)::after {
  169.         content: \"\";
  170.         display: inline-block;
  171.         width: .5px;
  172.         height: 50%;
  173.         background: #000;
  174.     }
  175.     .page-nav__link {
  176.         color: #000;
  177.         font-size: max(12px, min(3vw,24px) );
  178.         font-weight: 600;
  179.         display: block;
  180.         text-align: center;
  181.         padding: 20px 0;
  182.         width: 100%;
  183.     }
  184.     .page-nav__link:hover {
  185.         text-decoration: none;
  186.         color: #000;
  187.     }
  188.     .page-nav__link:hover::after {
  189.         content: \"\";
  190.         display: block;
  191.         position: absolute;
  192.         bottom: 0;
  193.         left: 0;
  194.         right: 0;
  195.         max-width: 256px;
  196.         height: 9px;
  197.         background: #63A7D5;
  198.         margin: 0 auto;
  199.     }
  200.     /*ここふるとは*/
  201.     .about-box {
  202.         display: grid;
  203.         grid-template: auto / 60% 1fr;
  204.         gap: 20px 60px;
  205.     }
  206.     .about-text p {
  207.         font-size: max(16px, min(3vw,20px) );
  208.         color: #707070;
  209.         line-height: 1.8;
  210.     }
  211.     .about-logo {
  212.     }
  213.     @media(max-width:767px) {
  214.         .about-box {
  215.             display: block;
  216.         }
  217.         .about-text {
  218.             width: 100%;
  219.             margin: 0 auto;
  220.         }
  221.         .about-logo {
  222.             width: 80%;
  223.             margin: 25px auto 0 auto;
  224.         }
  225.     }
  226.     @media(max-width:480px) {
  227.         .about-text,
  228.         .about-logo {
  229.             max-width: 370px;
  230.         }
  231.     }
  232.     /*メリット*/
  233.     .merit-box {
  234.         /*padding: 20px 0 0 0;*/
  235.     }
  236.     .merit-list {
  237.         display: grid;
  238.         grid-template-columns: repeat(3, 1fr);
  239.         gap: 45px 100px;
  240.     }
  241.     .merit-img {
  242.         max-width: 300px;
  243.         margin: 0 auto;
  244.     }
  245.     .merit-title {
  246.         font-weight: 600;
  247.         font-size: max(18px, min(2vw,24px) );
  248.         color: #707070;
  249.         line-height: 1.6;
  250.         text-align: center;
  251.         margin-top: 3rem;
  252.         margin-bottom: 3rem;
  253.         min-height: 3em;
  254.         display: grid;
  255.         place-items: center;
  256.     }
  257.     @media(max-width:480px) {
  258.         .merit-title {
  259.             margin-top: 2rem;
  260.             margin-bottom: 2rem;
  261.         }
  262.     }
  263.     .merit-text {
  264.         font-size: max(16px, min(2vw,14px) );
  265.         color: #707070;
  266.         line-height: 1.6;
  267.         text-align: center;
  268.         max-width: 385px;
  269.         margin: 0 auto;
  270.     }
  271.     @media(max-width:991px) {
  272.         .merit-list {
  273.             gap: 45px 50px;
  274.         }
  275.         .merit-img {
  276.             max-width: 200px;
  277.         }
  278.     }
  279.     @media(max-width:740px) {
  280.         .merit-list {
  281.             grid-template-columns: repeat(1, 1fr);
  282.         }
  283.         .merit-title br {
  284.             display: none;
  285.         }
  286.     }
  287.     @media(max-width:480px) {
  288.         .merit-img {
  289.             max-width: 160px;
  290.         }
  291.     }
  292.     /*ご利用方法*/
  293.     .howto-box {
  294.         width: min(100% - 18px, 1720px);
  295.         margin: 0 auto;
  296.     }
  297.     .howto-title {
  298.         font-size: max(28px, min(3vw,16px) );
  299.         font-weight: 600;
  300.         color: #707070;
  301.         border-bottom: solid 1px #707070;
  302.         padding: 0 1em 10px 1em;
  303.         margin-inline: auto;
  304.         line-height: 1.4;
  305.     }
  306.     .howto-movie {
  307.         width: 88%;
  308.         aspect-ratio: 16/9;
  309.         margin: 50px auto 100px auto;
  310.     }
  311.     .howto-movie:last-of-type {
  312.         margin-bottom: 0;
  313.     }
  314.     .howto-movie iframe {
  315.         width: 100%;
  316.         height: 100%;
  317.         display: block;
  318.     }
  319.     @media(max-width:740px) {
  320.         .howto-title {
  321.             padding: 0 0 5px 0;
  322.         }
  323.     }
  324.     @media(max-width:480px) {
  325.         .howto-title {
  326.             font-size: max(18px, min(2vw,24px) );
  327.             padding-left: 20px;
  328.         }
  329.         .howto-title span {
  330.             display: inline-block;
  331.             margin-left: -20px;
  332.             width: 20px;
  333.         }
  334.         .howto-movie {
  335.             margin: 15px auto 40px auto;
  336.             width: 95%;
  337.         }
  338.     }
  339.     /*FAQ*/
  340.     .faq-box {
  341.         background: #fafafa;
  342.         padding: 60px 0;
  343.         margin: 0 auto 60px auto;
  344.         border-radius: 50px;
  345.         box-shadow: 3px 4px 6px rgb(0 0 0 / 16%);
  346.     }
  347.     .faq-inner {
  348.         width: min(100% - 60px, 1300px);
  349.         margin-inline: auto;
  350.     }
  351.     .faq-item {
  352.         border: solid 2px #707070;
  353.         background: #fff;
  354.         border-radius: 35px;
  355.         padding: 15px 30px;
  356.         margin-bottom: 50px;
  357.         cursor: pointer;
  358.     }
  359.     .faq-item:last-of-type {
  360.         margin-bottom: 0;
  361.     }
  362.     .faq-qs {
  363.         font-size: max(28px, min(3vw,16px) );
  364.         font-weight: 600;
  365.         padding-right: 20px;
  366.         display: flex;
  367.         position: relative;
  368.     }
  369.     .q-icon {
  370.         width: 1.5em;
  371.     }
  372.     .faq-ans {
  373.         font-size: max(14px, min(3vw,20px) );
  374.         font-weight: 600;
  375.         color: #707070;
  376.         height: 0;
  377.         padding: 0 2.2em;
  378.         overflow: hidden;
  379.         text-align: justify;
  380.         transition-duration: .3s;
  381.     }
  382.     .faq-ans a {
  383.         text-decoration: underline;
  384.     }
  385.     .faq-item.active .faq-ans {
  386.         padding: 20px 2.2em 0 2.2em;
  387.         height: auto;
  388.         overflow: visible;
  389.     }
  390.     .faq-ans-desc {
  391.         margin-bottom: 30px;
  392.     }
  393.     .faq-ans-desc-list {
  394.         list-style: disc;
  395.     }
  396.     .faq-ans-desc-list li {
  397.         margin-bottom: 10px;
  398.     }
  399.     .open-icon {
  400.         background: #000;
  401.         width: 40px;
  402.         height: 40px;
  403.         margin-left: auto;
  404.         align-self: center;
  405.         border-radius: 999px;
  406.         display: flex;
  407.         align-items: center;
  408.         justify-content: center;
  409.     }
  410.     .open-icon::before {
  411.         content: \"\";
  412.         background: url(/html/template/default/assets/img/help/plus-icon.svg) no-repeat;
  413.         background-size: contain;
  414.         display: block;
  415.         width: 30px;
  416.         height: 30px;
  417.     }
  418.     .faq-item.active .open-icon::before {
  419.         content: \"\";
  420.         background: url(/html/template/default/assets/img/help/minus-icon.svg) no-repeat;
  421.         background-size: contain;
  422.         display: block;
  423.         width: 30px;
  424.         height: 30px;
  425.     }
  426.     .faq-note {
  427.         margin: 0 auto;
  428.         font-size: max(16px, min(3vw,20px) );
  429.         color: #707070;
  430.     }
  431.     .faq-note a {
  432.         text-decoration: underline;
  433.     }
  434.     .add-padding {
  435.         display: block;
  436.         padding-left: 13px;
  437.     }
  438.     .add-padding span {
  439.         margin-left: -13px;
  440.     }
  441.     @media(max-width:767px) {
  442.         .faq-item {
  443.             border-radius: 25px;
  444.             padding: 10px 20px;
  445.         }
  446.         .faq-qs {
  447.             padding-right: 0;
  448.         }
  449.     }
  450.     @media(max-width:599px) {
  451.         .faq-box {
  452.             border-radius: 14px;
  453.             padding: 20px 12px;
  454.             margin-bottom: 20px;
  455.         }
  456.         .faq-item.active {
  457.             border-radius: 25px;
  458.         }
  459.         .faq-inner {
  460.             width: 100%;
  461.         }
  462.         .faq-item {
  463.             margin-bottom: 15px;
  464.         }
  465.         .faq-ans {
  466.             padding: 0 0 0 0;
  467.             text-align: justify;
  468.         }
  469.         .faq-item.active .faq-ans {
  470.             padding: 20px 0 0 0;
  471.         }
  472.         .open-icon {
  473.             width: 24px;
  474.             height: 24px;
  475.         }
  476.         .open-icon::before,
  477.         .faq-item.active .open-icon::before {
  478.             width: 15px;
  479.             height: 15px;
  480.         }
  481.         .faq-ans-desc-list {
  482.             list-style-position: outside;
  483.             padding: 0 0 0 16px;
  484.         }
  485.     }
  486.     @media(max-width:480px) {
  487.         .faq-qs {
  488.             font-size: max(16px, min(2vw,20px) );
  489.         }
  490.         .faq-item {
  491.             border-radius: 25px;
  492.             padding: 10px;
  493.         }
  494.     }
  495.     .faq-ans .reception-hours {
  496.         padding: 1rem 0 0 13.8rem;
  497.     }
  498.     @media(min-width:480px) and (max-width:740px) {
  499.         .faq-ans .reception-hours {
  500.             padding: 0.5rem 0 0 11.2rem;
  501.         }
  502.     }
  503.     @media(max-width:599px) {
  504.         .faq-ans .reception-hours {
  505.             padding: 0.5rem 0 0 11.2rem;
  506.         }
  507.     }
  508.     @media(max-width:480px) {
  509.         .faq-ans .reception-hours {
  510.             padding: 0.5rem 0 0 9.6rem;
  511.         }
  512.     }
  514.     /* SP タブ*/
  515.     @media(max-width:480px) {
  516.         .page-nav__link {
  517.             padding: 15px 0;
  518.         }
  519.         .page-nav__item .page-nav__link::after {
  520.             content: \"\";
  521.             display: block;
  522.             position: absolute;
  523.             bottom: 0;
  524.             left: 0;
  525.             right: 0;
  526.             width: 80%;
  527.             height: 4px;
  528.             background: #e3e3e3;
  529.             margin: 0 auto;
  530.         }
  531.         .page-nav__item.is-active .page-nav__link::after {
  532.             background: #63A7D5;
  533.         }
  534.         .page-section {
  535.             display: none;
  536.         }
  537.         .page-section.is-active {
  538.             display: block;
  539.         }
  540.     }
  542.     ";
  543.         // line 479
  544.         echo "    @media(min-width:480px) and (max-width:740px) {
  545.         .page-nav__link {
  546.             font-size: 3vw;
  547.             padding: 10px 0;
  548.         }
  549.         .merit-list__item {
  550.             margin-bottom: 3.2rem;
  551.         }
  552.         .about-text p,
  553.         .about-note,
  554.         .merit-text__note,
  555.         .merit-text,
  556.         .step-item__text,
  557.         .step-item__note,
  558.         .footer-text {
  559.             font-size: max(18px, min(2.8vw,16px) );
  560.         }
  561.         .merit-title,
  562.         .howto-title {
  563.             font-size: max(24px, min(4vw,20px) );
  564.             margin-top: 1rem;
  565.             margin-bottom: 1rem;
  566.         }
  567.         .faq-qs {
  568.             font-size: max(22px, min(4vw,18px) );
  569.         }
  570.         .faq-ans {
  571.             font-size: max(12px, min(3vw,16px) );
  572.         }
  573.         .open-icon {
  574.             width: 30px;
  575.             height: 30px;
  576.         }
  578.         .merit-text,
  579.         .merit-text__note {
  580.             max-width: 85%;
  581.             margin: 0 auto 10px;
  582.         }
  583.         .step-item {
  584.             padding: 38px;
  585.         }
  586.     }
  587. </style>
  589. <script>
  590.     (function(d) {
  591.     var config = {
  592.         kitId: 'rhd5jop',
  593.         scriptTimeout: 3000,
  594.         async: true
  595.     },
  596.     h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\\bwf-loading\\b/g,\"\")+\" wf-inactive\";},config.scriptTimeout),tk=d.createElement(\"script\"),f=false,s=d.getElementsByTagName(\"script\")[0],a;h.className+=\" wf-loading\";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=\"complete\"&&a!=\"loaded\")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  597.     })(document);
  599.     \$(function() {
  600.         const faq_open = \$(\".js-open\");
  601.         faq_open.on('click', function () {
  602.             \$(this).parent('.faq-item').toggleClass(\"active\");
  603.         });
  604.     });
  606.     function switchByWidth() {
  607.         if (window.matchMedia('(max-width: 480px)').matches) {
  608.             // タブ
  609.             \$('.js-tab').on('click', function(e) {
  610.                 e.preventDefault()
  612.                 \$('.js-tab, .js-panel').removeClass('is-active');
  613.                 \$(this).addClass('is-active');
  614.                 var index = \$('.js-tab').index(this);
  615.                 \$('.js-panel').eq(index).addClass('is-active');
  616.             });
  617.         }
  618.     }
  619.     window.onload = switchByWidth;
  620.     window.onresize = switchByWidth;
  622.     loadFaqCocofuru = () => {
  623.         const currentHash = window.location.hash
  625.         if(currentHash) {
  626.             const navHrefs = Array.from(document.querySelectorAll('.page-nav__link'),
  627.             link => link.getAttribute('href'))
  629.             navHrefs.includes(currentHash) ? 
  630.             document.querySelector(`.page-nav__link[href='\${currentHash}']`).click() : null;
  631.         }
  632.     }
  633.     window.matchMedia('(max-width: 480px)').matches ?
  634.     window.addEventListener('load', loadFaqCocofuru) : null;
  635. </script>
  637. <div class=\"cocofuru-mv\">
  638.     <img class=\"mv-photo\" src=\"";
  639.         // line 573
  640.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/help/about-cocofuru-mv.jpg"), "html", null, true);
  641.         echo "\" alt=\"ココふるとは\">
  642. </div>
  644. <div class=\"page-contents\">
  645.     
  646.     <div class=\"page-heading\">
  647.         <h2 class=\"page-title\">ココふるとは</h2>
  648.     </div>
  649.     
  650.     <ul class=\"page-nav\">
  651.         <li class=\"page-nav__item js-tab is-active\"><a class=\"page-nav__link\" href=\"#about-cocofuru\">ココふるとは？</a></li>
  652.         <li class=\"page-nav__item js-tab\"><a class=\"page-nav__link\" href=\"#merit-cocofuru\">メリット</a></li>
  653.         <li class=\"page-nav__item js-tab\"><a class=\"page-nav__link\" href=\"#howto-cocofuru\">ご利用方法</a></li>
  654.         <li class=\"page-nav__item js-tab\"><a class=\"page-nav__link\" href=\"#faq-cocofuru\">よくあるご質問</a></li>
  655.     </ul>
  657.     <div class=\"container\">
  658.         
  659.         <div class=\"page-wrap\">
  660.         
  661.             <div id=\"about-cocofuru\" class=\"page-section js-panel is-active\">
  662.                 <h3 class=\"section-heading\">ココふるとは？</h3>
  663.                 <div class=\"about-box\">
  664.                     <div class=\"about-text\">
  665.                         <p>「ココふる」とは現地消費に特化した新しいカタチの「ふるさと納税サービス」です。<br>
  666.                         今訪れているこの場で、すぐに使えるお礼の品だけを集めました。レジャー施設や宿泊施設のご優待などをお礼の品として受け取り、旅中のご予定を少しお得に体験して、地域を応援してみませんか？<br>
  667.                         寄附のお申し込みはスマートフォンでお手続き可能です。従来のふるさと納税とは違い、その場ですぐに利用できますので、ご自宅への郵送もなく気軽にお申し込みいただけます。<br>
  668.                         皆さまが、ここで体験する新しい思い出づくりのお役にたてることを楽しみにお待ちしております。</p>
  669.                     </div>
  670.                     <div class=\"about-logo\">
  671.                         <img src=\"";
  672.         // line 603
  673.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/help/logo-box.png"), "html", null, true);
  674.         echo "\" alt=\"";
  675.         echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, (isset($context["BaseInfo"]) || array_key_exists("BaseInfo", $context) ? $context["BaseInfo"] : (function () { throw new RuntimeError('Variable "BaseInfo" does not exist.', 603, $this->source); })()), "shop_name", [], "any", false, false, false, 603), "html", null, true);
  676.         echo "\">
  677.                     </div>
  678.                 </div>
  679.             </div>
  680.             
  681.             <div id=\"merit-cocofuru\" class=\"page-section js-panel\">
  682.                 <h3 class=\"section-heading\">メリット</h3>
  683.                 <div class=\"merit-box\">
  684.                     <ul class=\"merit-list\">
  685.                         <li class=\"merit-list__item\">
  686.                             <div class=\"merit-img\">
  687.                                 <img src=\"";
  688.         // line 614
  689.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/help/merit-01.png?1"), "html", null, true);
  690.         echo "\" alt=\"\">
  691.                             </div>
  692.                             <h3 class=\"merit-title\">今すぐに<br>お礼の品を受け取れる</h3>
  693.                             <p class=\"merit-text\">「ココふる」は納税したその場ですぐにお礼の品を受け取ることができます。配送の心配もゼロ、管理の心配もゼロ。楽しみがすぐにあなたのもとへ届きます。</p>
  694.                         </li>
  695.                         <li class=\"merit-list__item\">
  696.                             <div class=\"merit-img\">
  697.                                 <img src=\"";
  698.         // line 621
  699.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/help/merit-02.png?1"), "html", null, true);
  700.         echo "\" alt=\"\">
  701.                             </div>
  702.                             <h3 class=\"merit-title\">いつもの旅をお得に<br>グレードアップできる</h3>
  703.                             <p class=\"merit-text\">旅先での少しの贅沢を「寄附」という形で行うことで、いつもより少しお得に旅中のご予定をグレードアップさせることができます。</p>
  704.                         </li>
  705.                         <li class=\"merit-list__item\">
  706.                             <div class=\"merit-img\">
  707.                                 <img src=\"";
  708.         // line 628
  709.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/img/help/merit-03.png?1"), "html", null, true);
  710.         echo "\" alt=\"\">
  711.                             </div>
  712.                             <h3 class=\"merit-title\">ここでしか味わえない<br>特別な体験ができる</h3>
  713.                             <p class=\"merit-text\">ここにしかない景色、ここにしかない食材、ここにしかない遊び、ここにしかない人々。旅先では旅先にしかない魅力が沢山あります。<br>
  714.                             「ココふる」を通して特別な体験を提供いたします。</p>
  715.                         </li>
  716.                     </ul>
  717.                 </div>
  718.             </div>
  719.             
  720.             <div id=\"howto-cocofuru\" class=\"page-section js-panel\">
  721.                 <h3 class=\"section-heading\">ご利用方法</h3>
  722.                 <div class=\"page-inner\">
  723.                     <div class=\"howto-box\">
  724.                         <h3 class=\"howto-title\"><span>1. </span>QRコードからサイトにアクセスして、お礼の品を選択</h3>
  725.                         <div class=\"howto-movie\">
  726.                             <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/5XhA03UEzO0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>
  727.                         </div>
  728.                         <h3 class=\"howto-title\"><span>2. </span>利用規約に同意いただき、新規会員登録</h3>
  729.                         <div class=\"howto-movie\">
  730.                             <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/MCfChwSqXzQ\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>
  731.                         </div>
  732.                         <h3 class=\"howto-title\"><span>3. </span>寄附を進める</h3>
  733.                         <div class=\"howto-movie\">
  734.                             <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/IzuuEVQw1k8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>
  735.                         </div>
  736.                         <h3 class=\"howto-title\"><span>4. </span>お礼の品の申し込みを確認、受け取る</h3>
  737.                         <div class=\"howto-movie\">
  738.                             <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/8vZop1zCNEM\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>
  739.                         </div>
  740.                     </div>
  741.                 </div>
  742.             </div>
  743.             
  744.             <div id=\"faq-cocofuru\" class=\"page-section js-panel\">
  745.                 <h2 class=\"section-heading\">よくあるご質問</h2>
  746.                 <div class=\"faq-box\">
  747.                     <div class=\"faq-inner\">
  748.                         <dl class=\"faq-item\">
  749.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>「ココふる」利用後の流れは？<span class=\"open-icon\"></span></dt>
  750.                             <dd class=\"faq-ans\">ご入力いただいた住所に各自治体から「寄付金受領証明書」が届きます。その後、税金の控除をお受けください。詳しくは<a href=\"/help/about_furusatotax\">こちら</a>。</dd>
  751.                         </dl>
  752.                         <dl class=\"faq-item\">
  753.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>利用場所がわかりません。<span class=\"open-icon\"></span></dt>
  754.                             <dd class=\"faq-ans\">本サイト、お礼の品ページに記載がございます。<a href=\"/products/list\">こちら</a>をご確認ください。その他詳細に関しましては、
  755.             各施設にお問い合わせください。</dd>
  756.                         </dl>
  757.                         <dl class=\"faq-item\">
  758.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>決済エラーが出ました。<span class=\"open-icon\"></span></dt>
  759.                             <dd class=\"faq-ans\">
  760.                                 決済に関するお問い合わせは、下記番号までご連絡下さいますよう、お願いします。サポート担当者へ決済エラーが表示された旨をお伝えください。<br><br>
  761.                                 <div><b>決済サポート：0120-599-526</b></div>
  762.                                 <div class=\"reception-hours\"><b>受付時間 10:00〜20:00</b></div>
  763.                             </dd>
  764.                         </dl>
  765.                         <dl class=\"faq-item\">
  766.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>寄付完了メールが届きません。<span class=\"open-icon\"></span></dt>
  767.                             <dd class=\"faq-ans\">
  768.                                 マイページの購入履歴から寄附が完了しているかご確認ください。また、下記内容にもご注意ください。<br><br>
  769.                                 <span class=\"add-padding\"><span>・</span>迷惑メールフィルタでの受信をしていないか</span>
  770.                                 <span class=\"add-padding\"><span>・</span>会員登録時にご登録いただいたメールアドレスが間違っていないかどうか<span>
  771.                             </dd>
  772.                         </dl>
  773.                         <dl class=\"faq-item\">
  774.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>クレジットカード以外の決済方法は？<span class=\"open-icon\"></span></dt>
  775.                             <dd class=\"faq-ans\">現在「ココふる」での決済方法はクレジットカードのみとなっております。ご了承ください。</dd>
  776.                         </dl>
  777.                         <dl class=\"faq-item\">
  778.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>ログインIDとパスワードを忘れました。<span class=\"open-icon\"></span></dt>
  779.                             <dd class=\"faq-ans\">
  780.                                 ログインIDは新規会員登録時にご登録いただいたメールアドレスです。<br>
  781.                                 パスワードをお忘れの場合は、<a href=\"/mypage/change\">こちら</a>より再設定をお願いします。
  782.                             </dd>
  783.                         </dl>
  784.                         <dl class=\"faq-item\">
  785.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>住所が変わりました。<span class=\"open-icon\"></span></dt>
  786.                             <dd class=\"faq-ans\">
  787.                                 <p class=\"faq-ans-desc\">マイページより会員情報を変更ください。</p>
  788.                                 <p class=\"faq-ans-desc\">既に今年の寄付がお済みの場合は、寄付申請時の登録情報で手続きされています。マイページの変更内容は、過去の寄付済み情報に自動で反映はされませんので、状況に応じて以下のご対応をお願いいたします。（寄付者住所・氏名は、ふるさと納税を行った翌年1月1日時点の住民票記載情報をご登録していただく必要があります。）</p>
  789.                                 <ul class=\"faq-ans-desc-list\">
  790.                                     <li>各種書類を未受領の場合：当自治体へ変更のご連絡をお願いいたします。</li>
  791.                                     <li>控除手続き前（確定申告またはワンストップ特例が未申請）の場合：当自治体へ変更のご連絡をお願いいたします。</li>
  792.                                     <li>控除手続き後（ワンストップ特例が申請済み）の場合：<a href=\"";
  793.         // line 710
  794.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getUrl("homepage");
  795.         echo "html/template/default/assets/pdf/declaration.pdf\" download=\"申告特例申請事項変更届.pdf\">申告特例申請事項変更届</a>をダウンロードしていただき、当自治体へ寄付を行った年の翌年１月10日(必着)までにご郵送ください。</li>
  796.                                 </ul>
  797.                             </dd>
  798.                         </dl>
  799.                     </div>
  800.                 </div>
  801.                 <p class=\"faq-note\">その他、お問い合わせは<a href=\"/contact\">こちら</a>まで。</p>
  802.             </div>
  803.     
  804.         </div>
  805.     </div>
  806.     ";
  807.         // line 722
  808.         echo "    
  809. </div>
  811. ";
  812.         
  813.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  815.         
  816.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  818.     }
  820.     public function getTemplateName()
  821.     {
  822.         return "Help/about_cocofuru.twig";
  823.     }
  825.     public function isTraitable()
  826.     {
  827.         return false;
  828.     }
  830.     public function getDebugInfo()
  831.     {
  832.         return array (  808 => 722,  794 => 710,  709 => 628,  699 => 621,  689 => 614,  673 => 603,  640 => 573,  544 => 479,  68 => 4,  58 => 3,  35 => 1,);
  833.     }
  835.     public function getSourceContext()
  836.     {
  837.         return new Source("{% extends 'default_frame.twig' %}
  839. {% block main %}
  841. <style>
  842.     html {
  843.       scroll-behavior: smooth;
  844.     }
  845.     img {
  846.         max-width: 100%;
  847.     }
  848.     ul {
  849.         list-style: none;
  850.         margin: 0;
  851.         padding: 0;
  852.     }
  853.     .page-contents {
  854.         max-width: 1150px;
  855.         margin: 0 auto;
  856.     }
  857.     .container {
  858.         width: min(100% - 15px, 1720px);
  859.         margin-inline: auto;
  860.         padding-right: 5px;
  861.         padding-left: 5px;
  862.     }
  863.     .page-section {
  864.         max-width: 1600px;
  865.         padding: 100px 0 80px 0;
  866.         margin-inline: auto;
  867.     }
  868.     @media(max-width:991px) {
  869.         .page-section {
  870.             padding: 40px 0 40px 0;
  871.         }
  872.     }
  873.     .page-heading {
  874.         width: min(100% - 30px, 1840px);
  875.         margin-inline: auto;
  876.         padding: 80px 0 10px 0;
  877.         margin-bottom: 60px;
  878.         border-bottom: solid 1px #707070;
  879.     }
  880.     @media(max-width:991px) {
  881.         .page-heading {
  882.             padding: 40px 0 10px 0;
  883.             margin-bottom: 40px;
  884.         }
  885.     }
  886.     @media(max-width:480px) {
  887.         .page-heading {
  888.             border-top: solid 1px #707070;
  889.             padding: 8px 0 8px 0;
  890.             margin-bottom:10px;
  891.         }
  892.     }
  893.     .page-title {
  894.         max-width: 1720px;
  895.         font-size: max(20px, min(3.8vw,30px) );
  896.         font-weight: 600;
  897.         color: #707070;
  898.         margin: 0 auto;
  899.         line-height: 1.4;
  900.     }
  901.     .section-heading {
  902.         display: inline-block;
  903.         font-size: max(24px, min(3vw,16px) );
  904.         font-weight: 600;
  905.         color: #fff;
  906.         background: #000;
  907.         border-radius: 60px;
  908.         padding: 28px;
  909.         margin: 0 0 50px 0;
  910.     }
  911.     @media(max-width:480px) {
  912.         .section-heading {
  913.             display: none;
  914.         }
  915.     }
  916.     /*MV*/
  917.     .cocofuru-mv {
  918.         margin-right: calc(50% - 50vw);
  919.         margin-left: calc(50% - 50vw);
  920.     }
  921.     .mv-photo {
  922.         width: 100%;
  923.     }
  924.     @media(max-width:480px) {
  925.         .cocofuru-mv {
  926.             display: none;
  927.         }
  928.     }
  929.     /*ページナビ*/
  930.     .page-nav {
  931.         display: flex;
  932.         background: #e3e3e3;
  933.     }
  934.     .page-nav__item {
  935.         flex: 1;
  936.         position: relative;
  937.         display: flex;
  938.         align-items: center;
  939.     }
  940.     .page-nav__item:not(:last-of-type)::after {
  941.         content: \"\";
  942.         display: inline-block;
  943.         width: .5px;
  944.         height: 50%;
  945.         background: #000;
  946.     }
  947.     .page-nav__link {
  948.         color: #000;
  949.         font-size: max(12px, min(3vw,24px) );
  950.         font-weight: 600;
  951.         display: block;
  952.         text-align: center;
  953.         padding: 20px 0;
  954.         width: 100%;
  955.     }
  956.     .page-nav__link:hover {
  957.         text-decoration: none;
  958.         color: #000;
  959.     }
  960.     .page-nav__link:hover::after {
  961.         content: \"\";
  962.         display: block;
  963.         position: absolute;
  964.         bottom: 0;
  965.         left: 0;
  966.         right: 0;
  967.         max-width: 256px;
  968.         height: 9px;
  969.         background: #63A7D5;
  970.         margin: 0 auto;
  971.     }
  972.     /*ここふるとは*/
  973.     .about-box {
  974.         display: grid;
  975.         grid-template: auto / 60% 1fr;
  976.         gap: 20px 60px;
  977.     }
  978.     .about-text p {
  979.         font-size: max(16px, min(3vw,20px) );
  980.         color: #707070;
  981.         line-height: 1.8;
  982.     }
  983.     .about-logo {
  984.     }
  985.     @media(max-width:767px) {
  986.         .about-box {
  987.             display: block;
  988.         }
  989.         .about-text {
  990.             width: 100%;
  991.             margin: 0 auto;
  992.         }
  993.         .about-logo {
  994.             width: 80%;
  995.             margin: 25px auto 0 auto;
  996.         }
  997.     }
  998.     @media(max-width:480px) {
  999.         .about-text,
  1000.         .about-logo {
  1001.             max-width: 370px;
  1002.         }
  1003.     }
  1004.     /*メリット*/
  1005.     .merit-box {
  1006.         /*padding: 20px 0 0 0;*/
  1007.     }
  1008.     .merit-list {
  1009.         display: grid;
  1010.         grid-template-columns: repeat(3, 1fr);
  1011.         gap: 45px 100px;
  1012.     }
  1013.     .merit-img {
  1014.         max-width: 300px;
  1015.         margin: 0 auto;
  1016.     }
  1017.     .merit-title {
  1018.         font-weight: 600;
  1019.         font-size: max(18px, min(2vw,24px) );
  1020.         color: #707070;
  1021.         line-height: 1.6;
  1022.         text-align: center;
  1023.         margin-top: 3rem;
  1024.         margin-bottom: 3rem;
  1025.         min-height: 3em;
  1026.         display: grid;
  1027.         place-items: center;
  1028.     }
  1029.     @media(max-width:480px) {
  1030.         .merit-title {
  1031.             margin-top: 2rem;
  1032.             margin-bottom: 2rem;
  1033.         }
  1034.     }
  1035.     .merit-text {
  1036.         font-size: max(16px, min(2vw,14px) );
  1037.         color: #707070;
  1038.         line-height: 1.6;
  1039.         text-align: center;
  1040.         max-width: 385px;
  1041.         margin: 0 auto;
  1042.     }
  1043.     @media(max-width:991px) {
  1044.         .merit-list {
  1045.             gap: 45px 50px;
  1046.         }
  1047.         .merit-img {
  1048.             max-width: 200px;
  1049.         }
  1050.     }
  1051.     @media(max-width:740px) {
  1052.         .merit-list {
  1053.             grid-template-columns: repeat(1, 1fr);
  1054.         }
  1055.         .merit-title br {
  1056.             display: none;
  1057.         }
  1058.     }
  1059.     @media(max-width:480px) {
  1060.         .merit-img {
  1061.             max-width: 160px;
  1062.         }
  1063.     }
  1064.     /*ご利用方法*/
  1065.     .howto-box {
  1066.         width: min(100% - 18px, 1720px);
  1067.         margin: 0 auto;
  1068.     }
  1069.     .howto-title {
  1070.         font-size: max(28px, min(3vw,16px) );
  1071.         font-weight: 600;
  1072.         color: #707070;
  1073.         border-bottom: solid 1px #707070;
  1074.         padding: 0 1em 10px 1em;
  1075.         margin-inline: auto;
  1076.         line-height: 1.4;
  1077.     }
  1078.     .howto-movie {
  1079.         width: 88%;
  1080.         aspect-ratio: 16/9;
  1081.         margin: 50px auto 100px auto;
  1082.     }
  1083.     .howto-movie:last-of-type {
  1084.         margin-bottom: 0;
  1085.     }
  1086.     .howto-movie iframe {
  1087.         width: 100%;
  1088.         height: 100%;
  1089.         display: block;
  1090.     }
  1091.     @media(max-width:740px) {
  1092.         .howto-title {
  1093.             padding: 0 0 5px 0;
  1094.         }
  1095.     }
  1096.     @media(max-width:480px) {
  1097.         .howto-title {
  1098.             font-size: max(18px, min(2vw,24px) );
  1099.             padding-left: 20px;
  1100.         }
  1101.         .howto-title span {
  1102.             display: inline-block;
  1103.             margin-left: -20px;
  1104.             width: 20px;
  1105.         }
  1106.         .howto-movie {
  1107.             margin: 15px auto 40px auto;
  1108.             width: 95%;
  1109.         }
  1110.     }
  1111.     /*FAQ*/
  1112.     .faq-box {
  1113.         background: #fafafa;
  1114.         padding: 60px 0;
  1115.         margin: 0 auto 60px auto;
  1116.         border-radius: 50px;
  1117.         box-shadow: 3px 4px 6px rgb(0 0 0 / 16%);
  1118.     }
  1119.     .faq-inner {
  1120.         width: min(100% - 60px, 1300px);
  1121.         margin-inline: auto;
  1122.     }
  1123.     .faq-item {
  1124.         border: solid 2px #707070;
  1125.         background: #fff;
  1126.         border-radius: 35px;
  1127.         padding: 15px 30px;
  1128.         margin-bottom: 50px;
  1129.         cursor: pointer;
  1130.     }
  1131.     .faq-item:last-of-type {
  1132.         margin-bottom: 0;
  1133.     }
  1134.     .faq-qs {
  1135.         font-size: max(28px, min(3vw,16px) );
  1136.         font-weight: 600;
  1137.         padding-right: 20px;
  1138.         display: flex;
  1139.         position: relative;
  1140.     }
  1141.     .q-icon {
  1142.         width: 1.5em;
  1143.     }
  1144.     .faq-ans {
  1145.         font-size: max(14px, min(3vw,20px) );
  1146.         font-weight: 600;
  1147.         color: #707070;
  1148.         height: 0;
  1149.         padding: 0 2.2em;
  1150.         overflow: hidden;
  1151.         text-align: justify;
  1152.         transition-duration: .3s;
  1153.     }
  1154.     .faq-ans a {
  1155.         text-decoration: underline;
  1156.     }
  1157.     .faq-item.active .faq-ans {
  1158.         padding: 20px 2.2em 0 2.2em;
  1159.         height: auto;
  1160.         overflow: visible;
  1161.     }
  1162.     .faq-ans-desc {
  1163.         margin-bottom: 30px;
  1164.     }
  1165.     .faq-ans-desc-list {
  1166.         list-style: disc;
  1167.     }
  1168.     .faq-ans-desc-list li {
  1169.         margin-bottom: 10px;
  1170.     }
  1171.     .open-icon {
  1172.         background: #000;
  1173.         width: 40px;
  1174.         height: 40px;
  1175.         margin-left: auto;
  1176.         align-self: center;
  1177.         border-radius: 999px;
  1178.         display: flex;
  1179.         align-items: center;
  1180.         justify-content: center;
  1181.     }
  1182.     .open-icon::before {
  1183.         content: \"\";
  1184.         background: url(/html/template/default/assets/img/help/plus-icon.svg) no-repeat;
  1185.         background-size: contain;
  1186.         display: block;
  1187.         width: 30px;
  1188.         height: 30px;
  1189.     }
  1190.     .faq-item.active .open-icon::before {
  1191.         content: \"\";
  1192.         background: url(/html/template/default/assets/img/help/minus-icon.svg) no-repeat;
  1193.         background-size: contain;
  1194.         display: block;
  1195.         width: 30px;
  1196.         height: 30px;
  1197.     }
  1198.     .faq-note {
  1199.         margin: 0 auto;
  1200.         font-size: max(16px, min(3vw,20px) );
  1201.         color: #707070;
  1202.     }
  1203.     .faq-note a {
  1204.         text-decoration: underline;
  1205.     }
  1206.     .add-padding {
  1207.         display: block;
  1208.         padding-left: 13px;
  1209.     }
  1210.     .add-padding span {
  1211.         margin-left: -13px;
  1212.     }
  1213.     @media(max-width:767px) {
  1214.         .faq-item {
  1215.             border-radius: 25px;
  1216.             padding: 10px 20px;
  1217.         }
  1218.         .faq-qs {
  1219.             padding-right: 0;
  1220.         }
  1221.     }
  1222.     @media(max-width:599px) {
  1223.         .faq-box {
  1224.             border-radius: 14px;
  1225.             padding: 20px 12px;
  1226.             margin-bottom: 20px;
  1227.         }
  1228.         .faq-item.active {
  1229.             border-radius: 25px;
  1230.         }
  1231.         .faq-inner {
  1232.             width: 100%;
  1233.         }
  1234.         .faq-item {
  1235.             margin-bottom: 15px;
  1236.         }
  1237.         .faq-ans {
  1238.             padding: 0 0 0 0;
  1239.             text-align: justify;
  1240.         }
  1241.         .faq-item.active .faq-ans {
  1242.             padding: 20px 0 0 0;
  1243.         }
  1244.         .open-icon {
  1245.             width: 24px;
  1246.             height: 24px;
  1247.         }
  1248.         .open-icon::before,
  1249.         .faq-item.active .open-icon::before {
  1250.             width: 15px;
  1251.             height: 15px;
  1252.         }
  1253.         .faq-ans-desc-list {
  1254.             list-style-position: outside;
  1255.             padding: 0 0 0 16px;
  1256.         }
  1257.     }
  1258.     @media(max-width:480px) {
  1259.         .faq-qs {
  1260.             font-size: max(16px, min(2vw,20px) );
  1261.         }
  1262.         .faq-item {
  1263.             border-radius: 25px;
  1264.             padding: 10px;
  1265.         }
  1266.     }
  1267.     .faq-ans .reception-hours {
  1268.         padding: 1rem 0 0 13.8rem;
  1269.     }
  1270.     @media(min-width:480px) and (max-width:740px) {
  1271.         .faq-ans .reception-hours {
  1272.             padding: 0.5rem 0 0 11.2rem;
  1273.         }
  1274.     }
  1275.     @media(max-width:599px) {
  1276.         .faq-ans .reception-hours {
  1277.             padding: 0.5rem 0 0 11.2rem;
  1278.         }
  1279.     }
  1280.     @media(max-width:480px) {
  1281.         .faq-ans .reception-hours {
  1282.             padding: 0.5rem 0 0 9.6rem;
  1283.         }
  1284.     }
  1286.     /* SP タブ*/
  1287.     @media(max-width:480px) {
  1288.         .page-nav__link {
  1289.             padding: 15px 0;
  1290.         }
  1291.         .page-nav__item .page-nav__link::after {
  1292.             content: \"\";
  1293.             display: block;
  1294.             position: absolute;
  1295.             bottom: 0;
  1296.             left: 0;
  1297.             right: 0;
  1298.             width: 80%;
  1299.             height: 4px;
  1300.             background: #e3e3e3;
  1301.             margin: 0 auto;
  1302.         }
  1303.         .page-nav__item.is-active .page-nav__link::after {
  1304.             background: #63A7D5;
  1305.         }
  1306.         .page-section {
  1307.             display: none;
  1308.         }
  1309.         .page-section.is-active {
  1310.             display: block;
  1311.         }
  1312.     }
  1314.     {# タブレット #}
  1315.     @media(min-width:480px) and (max-width:740px) {
  1316.         .page-nav__link {
  1317.             font-size: 3vw;
  1318.             padding: 10px 0;
  1319.         }
  1320.         .merit-list__item {
  1321.             margin-bottom: 3.2rem;
  1322.         }
  1323.         .about-text p,
  1324.         .about-note,
  1325.         .merit-text__note,
  1326.         .merit-text,
  1327.         .step-item__text,
  1328.         .step-item__note,
  1329.         .footer-text {
  1330.             font-size: max(18px, min(2.8vw,16px) );
  1331.         }
  1332.         .merit-title,
  1333.         .howto-title {
  1334.             font-size: max(24px, min(4vw,20px) );
  1335.             margin-top: 1rem;
  1336.             margin-bottom: 1rem;
  1337.         }
  1338.         .faq-qs {
  1339.             font-size: max(22px, min(4vw,18px) );
  1340.         }
  1341.         .faq-ans {
  1342.             font-size: max(12px, min(3vw,16px) );
  1343.         }
  1344.         .open-icon {
  1345.             width: 30px;
  1346.             height: 30px;
  1347.         }
  1349.         .merit-text,
  1350.         .merit-text__note {
  1351.             max-width: 85%;
  1352.             margin: 0 auto 10px;
  1353.         }
  1354.         .step-item {
  1355.             padding: 38px;
  1356.         }
  1357.     }
  1358. </style>
  1360. <script>
  1361.     (function(d) {
  1362.     var config = {
  1363.         kitId: 'rhd5jop',
  1364.         scriptTimeout: 3000,
  1365.         async: true
  1366.     },
  1367.     h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\\bwf-loading\\b/g,\"\")+\" wf-inactive\";},config.scriptTimeout),tk=d.createElement(\"script\"),f=false,s=d.getElementsByTagName(\"script\")[0],a;h.className+=\" wf-loading\";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=\"complete\"&&a!=\"loaded\")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  1368.     })(document);
  1370.     \$(function() {
  1371.         const faq_open = \$(\".js-open\");
  1372.         faq_open.on('click', function () {
  1373.             \$(this).parent('.faq-item').toggleClass(\"active\");
  1374.         });
  1375.     });
  1377.     function switchByWidth() {
  1378.         if (window.matchMedia('(max-width: 480px)').matches) {
  1379.             // タブ
  1380.             \$('.js-tab').on('click', function(e) {
  1381.                 e.preventDefault()
  1383.                 \$('.js-tab, .js-panel').removeClass('is-active');
  1384.                 \$(this).addClass('is-active');
  1385.                 var index = \$('.js-tab').index(this);
  1386.                 \$('.js-panel').eq(index).addClass('is-active');
  1387.             });
  1388.         }
  1389.     }
  1390.     window.onload = switchByWidth;
  1391.     window.onresize = switchByWidth;
  1393.     loadFaqCocofuru = () => {
  1394.         const currentHash = window.location.hash
  1396.         if(currentHash) {
  1397.             const navHrefs = Array.from(document.querySelectorAll('.page-nav__link'),
  1398.             link => link.getAttribute('href'))
  1400.             navHrefs.includes(currentHash) ? 
  1401.             document.querySelector(`.page-nav__link[href='\${currentHash}']`).click() : null;
  1402.         }
  1403.     }
  1404.     window.matchMedia('(max-width: 480px)').matches ?
  1405.     window.addEventListener('load', loadFaqCocofuru) : null;
  1406. </script>
  1408. <div class=\"cocofuru-mv\">
  1409.     <img class=\"mv-photo\" src=\"{{ asset('assets/img/help/about-cocofuru-mv.jpg') }}\" alt=\"ココふるとは\">
  1410. </div>
  1412. <div class=\"page-contents\">
  1413.     
  1414.     <div class=\"page-heading\">
  1415.         <h2 class=\"page-title\">ココふるとは</h2>
  1416.     </div>
  1417.     
  1418.     <ul class=\"page-nav\">
  1419.         <li class=\"page-nav__item js-tab is-active\"><a class=\"page-nav__link\" href=\"#about-cocofuru\">ココふるとは？</a></li>
  1420.         <li class=\"page-nav__item js-tab\"><a class=\"page-nav__link\" href=\"#merit-cocofuru\">メリット</a></li>
  1421.         <li class=\"page-nav__item js-tab\"><a class=\"page-nav__link\" href=\"#howto-cocofuru\">ご利用方法</a></li>
  1422.         <li class=\"page-nav__item js-tab\"><a class=\"page-nav__link\" href=\"#faq-cocofuru\">よくあるご質問</a></li>
  1423.     </ul>
  1425.     <div class=\"container\">
  1426.         
  1427.         <div class=\"page-wrap\">
  1428.         
  1429.             <div id=\"about-cocofuru\" class=\"page-section js-panel is-active\">
  1430.                 <h3 class=\"section-heading\">ココふるとは？</h3>
  1431.                 <div class=\"about-box\">
  1432.                     <div class=\"about-text\">
  1433.                         <p>「ココふる」とは現地消費に特化した新しいカタチの「ふるさと納税サービス」です。<br>
  1434.                         今訪れているこの場で、すぐに使えるお礼の品だけを集めました。レジャー施設や宿泊施設のご優待などをお礼の品として受け取り、旅中のご予定を少しお得に体験して、地域を応援してみませんか？<br>
  1435.                         寄附のお申し込みはスマートフォンでお手続き可能です。従来のふるさと納税とは違い、その場ですぐに利用できますので、ご自宅への郵送もなく気軽にお申し込みいただけます。<br>
  1436.                         皆さまが、ここで体験する新しい思い出づくりのお役にたてることを楽しみにお待ちしております。</p>
  1437.                     </div>
  1438.                     <div class=\"about-logo\">
  1439.                         <img src=\"{{ asset('assets/img/help/logo-box.png') }}\" alt=\"{{ BaseInfo.shop_name }}\">
  1440.                     </div>
  1441.                 </div>
  1442.             </div>
  1443.             
  1444.             <div id=\"merit-cocofuru\" class=\"page-section js-panel\">
  1445.                 <h3 class=\"section-heading\">メリット</h3>
  1446.                 <div class=\"merit-box\">
  1447.                     <ul class=\"merit-list\">
  1448.                         <li class=\"merit-list__item\">
  1449.                             <div class=\"merit-img\">
  1450.                                 <img src=\"{{ asset('assets/img/help/merit-01.png?1') }}\" alt=\"\">
  1451.                             </div>
  1452.                             <h3 class=\"merit-title\">今すぐに<br>お礼の品を受け取れる</h3>
  1453.                             <p class=\"merit-text\">「ココふる」は納税したその場ですぐにお礼の品を受け取ることができます。配送の心配もゼロ、管理の心配もゼロ。楽しみがすぐにあなたのもとへ届きます。</p>
  1454.                         </li>
  1455.                         <li class=\"merit-list__item\">
  1456.                             <div class=\"merit-img\">
  1457.                                 <img src=\"{{ asset('assets/img/help/merit-02.png?1') }}\" alt=\"\">
  1458.                             </div>
  1459.                             <h3 class=\"merit-title\">いつもの旅をお得に<br>グレードアップできる</h3>
  1460.                             <p class=\"merit-text\">旅先での少しの贅沢を「寄附」という形で行うことで、いつもより少しお得に旅中のご予定をグレードアップさせることができます。</p>
  1461.                         </li>
  1462.                         <li class=\"merit-list__item\">
  1463.                             <div class=\"merit-img\">
  1464.                                 <img src=\"{{ asset('assets/img/help/merit-03.png?1') }}\" alt=\"\">
  1465.                             </div>
  1466.                             <h3 class=\"merit-title\">ここでしか味わえない<br>特別な体験ができる</h3>
  1467.                             <p class=\"merit-text\">ここにしかない景色、ここにしかない食材、ここにしかない遊び、ここにしかない人々。旅先では旅先にしかない魅力が沢山あります。<br>
  1468.                             「ココふる」を通して特別な体験を提供いたします。</p>
  1469.                         </li>
  1470.                     </ul>
  1471.                 </div>
  1472.             </div>
  1473.             
  1474.             <div id=\"howto-cocofuru\" class=\"page-section js-panel\">
  1475.                 <h3 class=\"section-heading\">ご利用方法</h3>
  1476.                 <div class=\"page-inner\">
  1477.                     <div class=\"howto-box\">
  1478.                         <h3 class=\"howto-title\"><span>1. </span>QRコードからサイトにアクセスして、お礼の品を選択</h3>
  1479.                         <div class=\"howto-movie\">
  1480.                             <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/5XhA03UEzO0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>
  1481.                         </div>
  1482.                         <h3 class=\"howto-title\"><span>2. </span>利用規約に同意いただき、新規会員登録</h3>
  1483.                         <div class=\"howto-movie\">
  1484.                             <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/MCfChwSqXzQ\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>
  1485.                         </div>
  1486.                         <h3 class=\"howto-title\"><span>3. </span>寄附を進める</h3>
  1487.                         <div class=\"howto-movie\">
  1488.                             <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/IzuuEVQw1k8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>
  1489.                         </div>
  1490.                         <h3 class=\"howto-title\"><span>4. </span>お礼の品の申し込みを確認、受け取る</h3>
  1491.                         <div class=\"howto-movie\">
  1492.                             <iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/8vZop1zCNEM\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>
  1493.                         </div>
  1494.                     </div>
  1495.                 </div>
  1496.             </div>
  1497.             
  1498.             <div id=\"faq-cocofuru\" class=\"page-section js-panel\">
  1499.                 <h2 class=\"section-heading\">よくあるご質問</h2>
  1500.                 <div class=\"faq-box\">
  1501.                     <div class=\"faq-inner\">
  1502.                         <dl class=\"faq-item\">
  1503.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>「ココふる」利用後の流れは？<span class=\"open-icon\"></span></dt>
  1504.                             <dd class=\"faq-ans\">ご入力いただいた住所に各自治体から「寄付金受領証明書」が届きます。その後、税金の控除をお受けください。詳しくは<a href=\"/help/about_furusatotax\">こちら</a>。</dd>
  1505.                         </dl>
  1506.                         <dl class=\"faq-item\">
  1507.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>利用場所がわかりません。<span class=\"open-icon\"></span></dt>
  1508.                             <dd class=\"faq-ans\">本サイト、お礼の品ページに記載がございます。<a href=\"/products/list\">こちら</a>をご確認ください。その他詳細に関しましては、
  1509.             各施設にお問い合わせください。</dd>
  1510.                         </dl>
  1511.                         <dl class=\"faq-item\">
  1512.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>決済エラーが出ました。<span class=\"open-icon\"></span></dt>
  1513.                             <dd class=\"faq-ans\">
  1514.                                 決済に関するお問い合わせは、下記番号までご連絡下さいますよう、お願いします。サポート担当者へ決済エラーが表示された旨をお伝えください。<br><br>
  1515.                                 <div><b>決済サポート：0120-599-526</b></div>
  1516.                                 <div class=\"reception-hours\"><b>受付時間 10:00〜20:00</b></div>
  1517.                             </dd>
  1518.                         </dl>
  1519.                         <dl class=\"faq-item\">
  1520.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>寄付完了メールが届きません。<span class=\"open-icon\"></span></dt>
  1521.                             <dd class=\"faq-ans\">
  1522.                                 マイページの購入履歴から寄附が完了しているかご確認ください。また、下記内容にもご注意ください。<br><br>
  1523.                                 <span class=\"add-padding\"><span>・</span>迷惑メールフィルタでの受信をしていないか</span>
  1524.                                 <span class=\"add-padding\"><span>・</span>会員登録時にご登録いただいたメールアドレスが間違っていないかどうか<span>
  1525.                             </dd>
  1526.                         </dl>
  1527.                         <dl class=\"faq-item\">
  1528.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>クレジットカード以外の決済方法は？<span class=\"open-icon\"></span></dt>
  1529.                             <dd class=\"faq-ans\">現在「ココふる」での決済方法はクレジットカードのみとなっております。ご了承ください。</dd>
  1530.                         </dl>
  1531.                         <dl class=\"faq-item\">
  1532.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>ログインIDとパスワードを忘れました。<span class=\"open-icon\"></span></dt>
  1533.                             <dd class=\"faq-ans\">
  1534.                                 ログインIDは新規会員登録時にご登録いただいたメールアドレスです。<br>
  1535.                                 パスワードをお忘れの場合は、<a href=\"/mypage/change\">こちら</a>より再設定をお願いします。
  1536.                             </dd>
  1537.                         </dl>
  1538.                         <dl class=\"faq-item\">
  1539.                             <dt class=\"faq-qs js-open\"><span class=\"q-icon\">Q.</span>住所が変わりました。<span class=\"open-icon\"></span></dt>
  1540.                             <dd class=\"faq-ans\">
  1541.                                 <p class=\"faq-ans-desc\">マイページより会員情報を変更ください。</p>
  1542.                                 <p class=\"faq-ans-desc\">既に今年の寄付がお済みの場合は、寄付申請時の登録情報で手続きされています。マイページの変更内容は、過去の寄付済み情報に自動で反映はされませんので、状況に応じて以下のご対応をお願いいたします。（寄付者住所・氏名は、ふるさと納税を行った翌年1月1日時点の住民票記載情報をご登録していただく必要があります。）</p>
  1543.                                 <ul class=\"faq-ans-desc-list\">
  1544.                                     <li>各種書類を未受領の場合：当自治体へ変更のご連絡をお願いいたします。</li>
  1545.                                     <li>控除手続き前（確定申告またはワンストップ特例が未申請）の場合：当自治体へ変更のご連絡をお願いいたします。</li>
  1546.                                     <li>控除手続き後（ワンストップ特例が申請済み）の場合：<a href=\"{{ url('homepage') }}html/template/default/assets/pdf/declaration.pdf\" download=\"申告特例申請事項変更届.pdf\">申告特例申請事項変更届</a>をダウンロードしていただき、当自治体へ寄付を行った年の翌年１月10日(必着)までにご郵送ください。</li>
  1547.                                 </ul>
  1548.                             </dd>
  1549.                         </dl>
  1550.                     </div>
  1551.                 </div>
  1552.                 <p class=\"faq-note\">その他、お問い合わせは<a href=\"/contact\">こちら</a>まで。</p>
  1553.             </div>
  1554.     
  1555.         </div>
  1556.     </div>
  1557.     {#container#}
  1558.     
  1559. </div>
  1561. {% endblock %}", "Help/about_cocofuru.twig", "/home/cajiya/fjdksla.com/public_html/cocofuru.fjdksla.com/src/Eccube/Resource/template/default/Help/about_cocofuru.twig");
  1562.     }
  1563. }