src/Eccube/Resource/template/default/Help/about_cocofuru.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  5. <style>
  6.     html {
  7.       scroll-behavior: smooth;
  8.     }
  9.     img {
  10.         max-width: 100%;
  11.     }
  12.     ul {
  13.         list-style: none;
  14.         margin: 0;
  15.         padding: 0;
  16.     }
  17.     .page-contents {
  18.         max-width: 1150px;
  19.         margin: 0 auto;
  20.     }
  21.     .container {
  22.         width: min(100% - 15px, 1720px);
  23.         margin-inline: auto;
  24.         padding-right: 5px;
  25.         padding-left: 5px;
  26.     }
  27.     .page-section {
  28.         max-width: 1600px;
  29.         padding: 100px 0 80px 0;
  30.         margin-inline: auto;
  31.     }
  32.     @media(max-width:991px) {
  33.         .page-section {
  34.             padding: 40px 0 40px 0;
  35.         }
  36.     }
  37.     .page-heading {
  38.         width: min(100% - 30px, 1840px);
  39.         margin-inline: auto;
  40.         padding: 80px 0 10px 0;
  41.         margin-bottom: 60px;
  42.         border-bottom: solid 1px #707070;
  43.     }
  44.     @media(max-width:991px) {
  45.         .page-heading {
  46.             padding: 40px 0 10px 0;
  47.             margin-bottom: 40px;
  48.         }
  49.     }
  50.     @media(max-width:480px) {
  51.         .page-heading {
  52.             border-top: solid 1px #707070;
  53.             padding: 8px 0 8px 0;
  54.             margin-bottom:10px;
  55.         }
  56.     }
  57.     .page-title {
  58.         max-width: 1720px;
  59.         font-size: max(20px, min(3.8vw,30px) );
  60.         font-weight: 600;
  61.         color: #707070;
  62.         margin: 0 auto;
  63.         line-height: 1.4;
  64.     }
  65.     .section-heading {
  66.         display: inline-block;
  67.         font-size: max(24px, min(3vw,16px) );
  68.         font-weight: 600;
  69.         color: #fff;
  70.         background: #000;
  71.         border-radius: 60px;
  72.         padding: 28px;
  73.         margin: 0 0 50px 0;
  74.     }
  75.     @media(max-width:480px) {
  76.         .section-heading {
  77.             display: none;
  78.         }
  79.     }
  80.     /*MV*/
  81.     .cocofuru-mv {
  82.         margin-right: calc(50% - 50vw);
  83.         margin-left: calc(50% - 50vw);
  84.     }
  85.     .mv-photo {
  86.         width: 100%;
  87.     }
  88.     @media(max-width:480px) {
  89.         .cocofuru-mv {
  90.             display: none;
  91.         }
  92.     }
  93.     /*ページナビ*/
  94.     .page-nav {
  95.         display: flex;
  96.         background: #e3e3e3;
  97.     }
  98.     .page-nav__item {
  99.         flex: 1;
  100.         position: relative;
  101.         display: flex;
  102.         align-items: center;
  103.     }
  104.     .page-nav__item:not(:last-of-type)::after {
  105.         content: "";
  106.         display: inline-block;
  107.         width: .5px;
  108.         height: 50%;
  109.         background: #000;
  110.     }
  111.     .page-nav__link {
  112.         color: #000;
  113.         font-size: max(12px, min(3vw,24px) );
  114.         font-weight: 600;
  115.         display: block;
  116.         text-align: center;
  117.         padding: 20px 0;
  118.         width: 100%;
  119.     }
  120.     .page-nav__link:hover {
  121.         text-decoration: none;
  122.         color: #000;
  123.     }
  124.     .page-nav__link:hover::after {
  125.         content: "";
  126.         display: block;
  127.         position: absolute;
  128.         bottom: 0;
  129.         left: 0;
  130.         right: 0;
  131.         max-width: 256px;
  132.         height: 9px;
  133.         background: #63A7D5;
  134.         margin: 0 auto;
  135.     }
  136.     /*ここふるとは*/
  137.     .about-box {
  138.         display: grid;
  139.         grid-template: auto / 60% 1fr;
  140.         gap: 20px 60px;
  141.     }
  142.     .about-text p {
  143.         font-size: max(16px, min(3vw,20px) );
  144.         color: #707070;
  145.         line-height: 1.8;
  146.     }
  147.     .about-logo {
  148.     }
  149.     @media(max-width:767px) {
  150.         .about-box {
  151.             display: block;
  152.         }
  153.         .about-text {
  154.             width: 100%;
  155.             margin: 0 auto;
  156.         }
  157.         .about-logo {
  158.             width: 80%;
  159.             margin: 25px auto 0 auto;
  160.         }
  161.     }
  162.     @media(max-width:480px) {
  163.         .about-text,
  164.         .about-logo {
  165.             max-width: 370px;
  166.         }
  167.     }
  168.     /*メリット*/
  169.     .merit-box {
  170.         /*padding: 20px 0 0 0;*/
  171.     }
  172.     .merit-list {
  173.         display: grid;
  174.         grid-template-columns: repeat(3, 1fr);
  175.         gap: 45px 100px;
  176.     }
  177.     .merit-img {
  178.         max-width: 300px;
  179.         margin: 0 auto;
  180.     }
  181.     .merit-title {
  182.         font-weight: 600;
  183.         font-size: max(18px, min(2vw,24px) );
  184.         color: #707070;
  185.         line-height: 1.6;
  186.         text-align: center;
  187.         margin-top: 3rem;
  188.         margin-bottom: 3rem;
  189.         min-height: 3em;
  190.         display: grid;
  191.         place-items: center;
  192.     }
  193.     @media(max-width:480px) {
  194.         .merit-title {
  195.             margin-top: 2rem;
  196.             margin-bottom: 2rem;
  197.         }
  198.     }
  199.     .merit-text {
  200.         font-size: max(16px, min(2vw,14px) );
  201.         color: #707070;
  202.         line-height: 1.6;
  203.         text-align: center;
  204.         max-width: 385px;
  205.         margin: 0 auto;
  206.     }
  207.     @media(max-width:991px) {
  208.         .merit-list {
  209.             gap: 45px 50px;
  210.         }
  211.         .merit-img {
  212.             max-width: 200px;
  213.         }
  214.     }
  215.     @media(max-width:740px) {
  216.         .merit-list {
  217.             grid-template-columns: repeat(1, 1fr);
  218.         }
  219.         .merit-title br {
  220.             display: none;
  221.         }
  222.     }
  223.     @media(max-width:480px) {
  224.         .merit-img {
  225.             max-width: 160px;
  226.         }
  227.     }
  228.     /*ご利用方法*/
  229.     .howto-box {
  230.         width: min(100% - 18px, 1720px);
  231.         margin: 0 auto;
  232.     }
  233.     .howto-title {
  234.         font-size: max(28px, min(3vw,16px) );
  235.         font-weight: 600;
  236.         color: #707070;
  237.         border-bottom: solid 1px #707070;
  238.         padding: 0 1em 10px 1em;
  239.         margin-inline: auto;
  240.         line-height: 1.4;
  241.     }
  242.     .howto-movie {
  243.         width: 88%;
  244.         aspect-ratio: 16/9;
  245.         margin: 50px auto 100px auto;
  246.     }
  247.     .howto-movie:last-of-type {
  248.         margin-bottom: 0;
  249.     }
  250.     .howto-movie iframe {
  251.         width: 100%;
  252.         height: 100%;
  253.         display: block;
  254.     }
  255.     @media(max-width:740px) {
  256.         .howto-title {
  257.             padding: 0 0 5px 0;
  258.         }
  259.     }
  260.     @media(max-width:480px) {
  261.         .howto-title {
  262.             font-size: max(18px, min(2vw,24px) );
  263.             padding-left: 20px;
  264.         }
  265.         .howto-title span {
  266.             display: inline-block;
  267.             margin-left: -20px;
  268.             width: 20px;
  269.         }
  270.         .howto-movie {
  271.             margin: 15px auto 40px auto;
  272.             width: 95%;
  273.         }
  274.     }
  275.     /*FAQ*/
  276.     .faq-box {
  277.         background: #fafafa;
  278.         padding: 60px 0;
  279.         margin: 0 auto 60px auto;
  280.         border-radius: 50px;
  281.         box-shadow: 3px 4px 6px rgb(0 0 0 / 16%);
  282.     }
  283.     .faq-inner {
  284.         width: min(100% - 60px, 1300px);
  285.         margin-inline: auto;
  286.     }
  287.     .faq-item {
  288.         border: solid 2px #707070;
  289.         background: #fff;
  290.         border-radius: 35px;
  291.         padding: 15px 30px;
  292.         margin-bottom: 50px;
  293.         cursor: pointer;
  294.     }
  295.     .faq-item:last-of-type {
  296.         margin-bottom: 0;
  297.     }
  298.     .faq-qs {
  299.         font-size: max(28px, min(3vw,16px) );
  300.         font-weight: 600;
  301.         padding-right: 20px;
  302.         display: flex;
  303.         position: relative;
  304.     }
  305.     .q-icon {
  306.         width: 1.5em;
  307.     }
  308.     .faq-ans {
  309.         font-size: max(14px, min(3vw,20px) );
  310.         font-weight: 600;
  311.         color: #707070;
  312.         height: 0;
  313.         padding: 0 2.2em;
  314.         overflow: hidden;
  315.         text-align: justify;
  316.         transition-duration: .3s;
  317.     }
  318.     .faq-ans a {
  319.         text-decoration: underline;
  320.     }
  321.     .faq-item.active .faq-ans {
  322.         padding: 20px 2.2em 0 2.2em;
  323.         height: auto;
  324.         overflow: visible;
  325.     }
  326.     .faq-ans-desc {
  327.         margin-bottom: 30px;
  328.     }
  329.     .faq-ans-desc-list {
  330.         list-style: disc;
  331.     }
  332.     .faq-ans-desc-list li {
  333.         margin-bottom: 10px;
  334.     }
  335.     .open-icon {
  336.         background: #000;
  337.         width: 40px;
  338.         height: 40px;
  339.         margin-left: auto;
  340.         align-self: center;
  341.         border-radius: 999px;
  342.         display: flex;
  343.         align-items: center;
  344.         justify-content: center;
  345.     }
  346.     .open-icon::before {
  347.         content: "";
  348.         background: url(/html/template/default/assets/img/help/plus-icon.svg) no-repeat;
  349.         background-size: contain;
  350.         display: block;
  351.         width: 30px;
  352.         height: 30px;
  353.     }
  354.     .faq-item.active .open-icon::before {
  355.         content: "";
  356.         background: url(/html/template/default/assets/img/help/minus-icon.svg) no-repeat;
  357.         background-size: contain;
  358.         display: block;
  359.         width: 30px;
  360.         height: 30px;
  361.     }
  362.     .faq-note {
  363.         margin: 0 auto;
  364.         font-size: max(16px, min(3vw,20px) );
  365.         color: #707070;
  366.     }
  367.     .faq-note a {
  368.         text-decoration: underline;
  369.     }
  370.     .add-padding {
  371.         display: block;
  372.         padding-left: 13px;
  373.     }
  374.     .add-padding span {
  375.         margin-left: -13px;
  376.     }
  377.     @media(max-width:767px) {
  378.         .faq-item {
  379.             border-radius: 25px;
  380.             padding: 10px 20px;
  381.         }
  382.         .faq-qs {
  383.             padding-right: 0;
  384.         }
  385.     }
  386.     @media(max-width:599px) {
  387.         .faq-box {
  388.             border-radius: 14px;
  389.             padding: 20px 12px;
  390.             margin-bottom: 20px;
  391.         }
  392.         .faq-item.active {
  393.             border-radius: 25px;
  394.         }
  395.         .faq-inner {
  396.             width: 100%;
  397.         }
  398.         .faq-item {
  399.             margin-bottom: 15px;
  400.         }
  401.         .faq-ans {
  402.             padding: 0 0 0 0;
  403.             text-align: justify;
  404.         }
  405.         .faq-item.active .faq-ans {
  406.             padding: 20px 0 0 0;
  407.         }
  408.         .open-icon {
  409.             width: 24px;
  410.             height: 24px;
  411.         }
  412.         .open-icon::before,
  413.         .faq-item.active .open-icon::before {
  414.             width: 15px;
  415.             height: 15px;
  416.         }
  417.         .faq-ans-desc-list {
  418.             list-style-position: outside;
  419.             padding: 0 0 0 16px;
  420.         }
  421.     }
  422.     @media(max-width:480px) {
  423.         .faq-qs {
  424.             font-size: max(16px, min(2vw,20px) );
  425.         }
  426.         .faq-item {
  427.             border-radius: 25px;
  428.             padding: 10px;
  429.         }
  430.     }
  431.     .faq-ans .reception-hours {
  432.         padding: 1rem 0 0 13.8rem;
  433.     }
  434.     @media(min-width:480px) and (max-width:740px) {
  435.         .faq-ans .reception-hours {
  436.             padding: 0.5rem 0 0 11.2rem;
  437.         }
  438.     }
  439.     @media(max-width:599px) {
  440.         .faq-ans .reception-hours {
  441.             padding: 0.5rem 0 0 11.2rem;
  442.         }
  443.     }
  444.     @media(max-width:480px) {
  445.         .faq-ans .reception-hours {
  446.             padding: 0.5rem 0 0 9.6rem;
  447.         }
  448.     }
  450.     /* SP タブ*/
  451.     @media(max-width:480px) {
  452.         .page-nav__link {
  453.             padding: 15px 0;
  454.         }
  455.         .page-nav__item .page-nav__link::after {
  456.             content: "";
  457.             display: block;
  458.             position: absolute;
  459.             bottom: 0;
  460.             left: 0;
  461.             right: 0;
  462.             width: 80%;
  463.             height: 4px;
  464.             background: #e3e3e3;
  465.             margin: 0 auto;
  466.         }
  467.         .page-nav__item.is-active .page-nav__link::after {
  468.             background: #63A7D5;
  469.         }
  470.         .page-section {
  471.             display: none;
  472.         }
  473.         .page-section.is-active {
  474.             display: block;
  475.         }
  476.     }
  478.     {# タブレット #}
  479.     @media(min-width:480px) and (max-width:740px) {
  480.         .page-nav__link {
  481.             font-size: 3vw;
  482.             padding: 10px 0;
  483.         }
  484.         .merit-list__item {
  485.             margin-bottom: 3.2rem;
  486.         }
  487.         .about-text p,
  488.         .about-note,
  489.         .merit-text__note,
  490.         .merit-text,
  491.         .step-item__text,
  492.         .step-item__note,
  493.         .footer-text {
  494.             font-size: max(18px, min(2.8vw,16px) );
  495.         }
  496.         .merit-title,
  497.         .howto-title {
  498.             font-size: max(24px, min(4vw,20px) );
  499.             margin-top: 1rem;
  500.             margin-bottom: 1rem;
  501.         }
  502.         .faq-qs {
  503.             font-size: max(22px, min(4vw,18px) );
  504.         }
  505.         .faq-ans {
  506.             font-size: max(12px, min(3vw,16px) );
  507.         }
  508.         .open-icon {
  509.             width: 30px;
  510.             height: 30px;
  511.         }
  513.         .merit-text,
  514.         .merit-text__note {
  515.             max-width: 85%;
  516.             margin: 0 auto 10px;
  517.         }
  518.         .step-item {
  519.             padding: 38px;
  520.         }
  521.     }
  522. </style>
  524. <script>
  525.     (function(d) {
  526.     var config = {
  527.         kitId: 'rhd5jop',
  528.         scriptTimeout: 3000,
  529.         async: true
  530.     },
  531.     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)
  532.     })(document);
  534.     $(function() {
  535.         const faq_open = $(".js-open");
  536.         faq_open.on('click', function () {
  537.             $(this).parent('.faq-item').toggleClass("active");
  538.         });
  539.     });
  541.     function switchByWidth() {
  542.         if (window.matchMedia('(max-width: 480px)').matches) {
  543.             // タブ
  544.             $('.js-tab').on('click', function(e) {
  545.                 e.preventDefault()
  547.                 $('.js-tab, .js-panel').removeClass('is-active');
  548.                 $(this).addClass('is-active');
  549.                 var index = $('.js-tab').index(this);
  550.                 $('.js-panel').eq(index).addClass('is-active');
  551.             });
  552.         }
  553.     }
  554.     window.onload = switchByWidth;
  555.     window.onresize = switchByWidth;
  557.     loadFaqCocofuru = () => {
  558.         const currentHash = window.location.hash
  560.         if(currentHash) {
  561.             const navHrefs = Array.from(document.querySelectorAll('.page-nav__link'),
  562.             link => link.getAttribute('href'))
  564.             navHrefs.includes(currentHash) ? 
  565.             document.querySelector(`.page-nav__link[href='${currentHash}']`).click() : null;
  566.         }
  567.     }
  568.     window.matchMedia('(max-width: 480px)').matches ?
  569.     window.addEventListener('load', loadFaqCocofuru) : null;
  570. </script>
  572. <div class="cocofuru-mv">
  573.     <img class="mv-photo" src="{{ asset('assets/img/help/about-cocofuru-mv.jpg') }}" alt="ココふるとは">
  574. </div>
  576. <div class="page-contents">
  577.     
  578.     <div class="page-heading">
  579.         <h2 class="page-title">ココふるとは</h2>
  580.     </div>
  581.     
  582.     <ul class="page-nav">
  583.         <li class="page-nav__item js-tab is-active"><a class="page-nav__link" href="#about-cocofuru">ココふるとは？</a></li>
  584.         <li class="page-nav__item js-tab"><a class="page-nav__link" href="#merit-cocofuru">メリット</a></li>
  585.         <li class="page-nav__item js-tab"><a class="page-nav__link" href="#howto-cocofuru">ご利用方法</a></li>
  586.         <li class="page-nav__item js-tab"><a class="page-nav__link" href="#faq-cocofuru">よくあるご質問</a></li>
  587.     </ul>
  589.     <div class="container">
  590.         
  591.         <div class="page-wrap">
  592.         
  593.             <div id="about-cocofuru" class="page-section js-panel is-active">
  594.                 <h3 class="section-heading">ココふるとは？</h3>
  595.                 <div class="about-box">
  596.                     <div class="about-text">
  597.                         <p>「ココふる」とは現地消費に特化した新しいカタチの「ふるさと納税サービス」です。<br>
  598.                         今訪れているこの場で、すぐに使えるお礼の品だけを集めました。レジャー施設や宿泊施設のご優待などをお礼の品として受け取り、旅中のご予定を少しお得に体験して、地域を応援してみませんか？<br>
  599.                         寄附のお申し込みはスマートフォンでお手続き可能です。従来のふるさと納税とは違い、その場ですぐに利用できますので、ご自宅への郵送もなく気軽にお申し込みいただけます。<br>
  600.                         皆さまが、ここで体験する新しい思い出づくりのお役にたてることを楽しみにお待ちしております。</p>
  601.                     </div>
  602.                     <div class="about-logo">
  603.                         <img src="{{ asset('assets/img/help/logo-box.png') }}" alt="{{ BaseInfo.shop_name }}">
  604.                     </div>
  605.                 </div>
  606.             </div>
  607.             
  608.             <div id="merit-cocofuru" class="page-section js-panel">
  609.                 <h3 class="section-heading">メリット</h3>
  610.                 <div class="merit-box">
  611.                     <ul class="merit-list">
  612.                         <li class="merit-list__item">
  613.                             <div class="merit-img">
  614.                                 <img src="{{ asset('assets/img/help/merit-01.png?1') }}" alt="">
  615.                             </div>
  616.                             <h3 class="merit-title">今すぐに<br>お礼の品を受け取れる</h3>
  617.                             <p class="merit-text">「ココふる」は納税したその場ですぐにお礼の品を受け取ることができます。配送の心配もゼロ、管理の心配もゼロ。楽しみがすぐにあなたのもとへ届きます。</p>
  618.                         </li>
  619.                         <li class="merit-list__item">
  620.                             <div class="merit-img">
  621.                                 <img src="{{ asset('assets/img/help/merit-02.png?1') }}" alt="">
  622.                             </div>
  623.                             <h3 class="merit-title">いつもの旅をお得に<br>グレードアップできる</h3>
  624.                             <p class="merit-text">旅先での少しの贅沢を「寄附」という形で行うことで、いつもより少しお得に旅中のご予定をグレードアップさせることができます。</p>
  625.                         </li>
  626.                         <li class="merit-list__item">
  627.                             <div class="merit-img">
  628.                                 <img src="{{ asset('assets/img/help/merit-03.png?1') }}" alt="">
  629.                             </div>
  630.                             <h3 class="merit-title">ここでしか味わえない<br>特別な体験ができる</h3>
  631.                             <p class="merit-text">ここにしかない景色、ここにしかない食材、ここにしかない遊び、ここにしかない人々。旅先では旅先にしかない魅力が沢山あります。<br>
  632.                             「ココふる」を通して特別な体験を提供いたします。</p>
  633.                         </li>
  634.                     </ul>
  635.                 </div>
  636.             </div>
  637.             
  638.             <div id="howto-cocofuru" class="page-section js-panel">
  639.                 <h3 class="section-heading">ご利用方法</h3>
  640.                 <div class="page-inner">
  641.                     <div class="howto-box">
  642.                         <h3 class="howto-title"><span>1. </span>QRコードからサイトにアクセスして、お礼の品を選択</h3>
  643.                         <div class="howto-movie">
  644.                             <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>
  645.                         </div>
  646.                         <h3 class="howto-title"><span>2. </span>利用規約に同意いただき、新規会員登録</h3>
  647.                         <div class="howto-movie">
  648.                             <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>
  649.                         </div>
  650.                         <h3 class="howto-title"><span>3. </span>寄附を進める</h3>
  651.                         <div class="howto-movie">
  652.                             <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>
  653.                         </div>
  654.                         <h3 class="howto-title"><span>4. </span>お礼の品の申し込みを確認、受け取る</h3>
  655.                         <div class="howto-movie">
  656.                             <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>
  657.                         </div>
  658.                     </div>
  659.                 </div>
  660.             </div>
  661.             
  662.             <div id="faq-cocofuru" class="page-section js-panel">
  663.                 <h2 class="section-heading">よくあるご質問</h2>
  664.                 <div class="faq-box">
  665.                     <div class="faq-inner">
  666.                         <dl class="faq-item">
  667.                             <dt class="faq-qs js-open"><span class="q-icon">Q.</span>「ココふる」利用後の流れは？<span class="open-icon"></span></dt>
  668.                             <dd class="faq-ans">ご入力いただいた住所に各自治体から「寄付金受領証明書」が届きます。その後、税金の控除をお受けください。詳しくは<a href="/help/about_furusatotax">こちら</a>。</dd>
  669.                         </dl>
  670.                         <dl class="faq-item">
  671.                             <dt class="faq-qs js-open"><span class="q-icon">Q.</span>利用場所がわかりません。<span class="open-icon"></span></dt>
  672.                             <dd class="faq-ans">本サイト、お礼の品ページに記載がございます。<a href="/products/list">こちら</a>をご確認ください。その他詳細に関しましては、
  673.             各施設にお問い合わせください。</dd>
  674.                         </dl>
  675.                         <dl class="faq-item">
  676.                             <dt class="faq-qs js-open"><span class="q-icon">Q.</span>決済エラーが出ました。<span class="open-icon"></span></dt>
  677.                             <dd class="faq-ans">
  678.                                 決済に関するお問い合わせは、下記番号までご連絡下さいますよう、お願いします。サポート担当者へ決済エラーが表示された旨をお伝えください。<br><br>
  679.                                 <div><b>決済サポート：0120-599-526</b></div>
  680.                                 <div class="reception-hours"><b>受付時間 10:00〜20:00</b></div>
  681.                             </dd>
  682.                         </dl>
  683.                         <dl class="faq-item">
  684.                             <dt class="faq-qs js-open"><span class="q-icon">Q.</span>寄付完了メールが届きません。<span class="open-icon"></span></dt>
  685.                             <dd class="faq-ans">
  686.                                 マイページの購入履歴から寄附が完了しているかご確認ください。また、下記内容にもご注意ください。<br><br>
  687.                                 <span class="add-padding"><span>・</span>迷惑メールフィルタでの受信をしていないか</span>
  688.                                 <span class="add-padding"><span>・</span>会員登録時にご登録いただいたメールアドレスが間違っていないかどうか<span>
  689.                             </dd>
  690.                         </dl>
  691.                         <dl class="faq-item">
  692.                             <dt class="faq-qs js-open"><span class="q-icon">Q.</span>クレジットカード以外の決済方法は？<span class="open-icon"></span></dt>
  693.                             <dd class="faq-ans">現在「ココふる」での決済方法はクレジットカードのみとなっております。ご了承ください。</dd>
  694.                         </dl>
  695.                         <dl class="faq-item">
  696.                             <dt class="faq-qs js-open"><span class="q-icon">Q.</span>ログインIDとパスワードを忘れました。<span class="open-icon"></span></dt>
  697.                             <dd class="faq-ans">
  698.                                 ログインIDは新規会員登録時にご登録いただいたメールアドレスです。<br>
  699.                                 パスワードをお忘れの場合は、<a href="/mypage/change">こちら</a>より再設定をお願いします。
  700.                             </dd>
  701.                         </dl>
  702.                         <dl class="faq-item">
  703.                             <dt class="faq-qs js-open"><span class="q-icon">Q.</span>住所が変わりました。<span class="open-icon"></span></dt>
  704.                             <dd class="faq-ans">
  705.                                 <p class="faq-ans-desc">マイページより会員情報を変更ください。</p>
  706.                                 <p class="faq-ans-desc">既に今年の寄付がお済みの場合は、寄付申請時の登録情報で手続きされています。マイページの変更内容は、過去の寄付済み情報に自動で反映はされませんので、状況に応じて以下のご対応をお願いいたします。（寄付者住所・氏名は、ふるさと納税を行った翌年1月1日時点の住民票記載情報をご登録していただく必要があります。）</p>
  707.                                 <ul class="faq-ans-desc-list">
  708.                                     <li>各種書類を未受領の場合：当自治体へ変更のご連絡をお願いいたします。</li>
  709.                                     <li>控除手続き前（確定申告またはワンストップ特例が未申請）の場合：当自治体へ変更のご連絡をお願いいたします。</li>
  710.                                     <li>控除手続き後（ワンストップ特例が申請済み）の場合：<a href="{{ url('homepage') }}html/template/default/assets/pdf/declaration.pdf" download="申告特例申請事項変更届.pdf">申告特例申請事項変更届</a>をダウンロードしていただき、当自治体へ寄付を行った年の翌年１月10日(必着)までにご郵送ください。</li>
  711.                                 </ul>
  712.                             </dd>
  713.                         </dl>
  714.                     </div>
  715.                 </div>
  716.                 <p class="faq-note">その他、お問い合わせは<a href="/contact">こちら</a>まで。</p>
  717.             </div>
  718.     
  719.         </div>
  720.     </div>
  721.     {#container#}
  722.     
  723. </div>
  725. {% endblock %}