src/Eccube/Resource/template/default/Help/about_furusatotax.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% - 20px, 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(28px, 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 5px;
  118.         width: 100%;
  119.     }
  120.     .page-nav__link:hover {
  121.         text-decoration: none;
  122.         color: #000;
  123.     }
  124.     @media(min-width:481px) {
  125.         .page-nav__link:hover::after {
  126.             content: "";
  127.             display: block;
  128.             position: absolute;
  129.             bottom: 0;
  130.             left: 0;
  131.             right: 0;
  132.             max-width: 256px;
  133.             height: 9px;
  134.             background: #63A7D5;
  135.             margin: 0 auto;
  136.         }
  137.     }
  138.     @media(max-width:480px) {
  139.         .page-nav__link {
  140.             padding: 15px 0;
  141.         }
  142.     }
  143.     /*ここふる納税とは*/
  144.     .about-text p {
  145.         font-size: max(16px, min(3vw,20px) );
  146.         color: #707070;
  147.         line-height: 1.8;
  148.         margin-bottom: 1.5em;
  149.         padding: 0 20px;
  150.     }
  151.     .about-picture {
  152.         padding-bottom: 40px;
  153.     }
  154.     .about-note {
  155.         font-size: max(16px, min(2vw,14px) );
  156.     }
  157.     @media(max-width:767px) {
  158.         .about-box {
  159.             display: block;
  160.         }
  161.         .about-text {
  162.             width: 100%;
  163.             margin: 0 auto;
  164.         }
  165.         .about-text p {
  166.             padding: 0;
  167.         }
  168.         .about-logo {
  169.             width: 80%;
  170.             margin: 25px auto 0 auto;
  171.         }
  172.         .about-picture {
  173.             padding-bottom: 10px;
  174.         }
  175.     }
  176.     @media(max-width:480px) {
  177.         .about-text,
  178.         .about-logo {
  179.             max-width: 360px;
  180.         }
  181.     }
  182.     /*メリット*/
  183.     .merit-list {
  184.         display: grid;
  185.         grid-template-columns: repeat(4, 1fr);
  186.         gap: 45px 25px;
  187.     }
  188.     .merit-img {
  189.         max-width: 295px;
  190.         margin: 0 auto;
  191.     }
  192.     .merit-title {
  193.         font-weight: 600;
  194.         font-size: max(20px, min(2vw,24px) );
  195.         color: #707070;
  196.         line-height: 1.6;
  197.         text-align: center;
  198.         margin-top: 3rem;
  199.         margin-bottom: 3rem;
  200.         min-height: 3em;
  201.         display: grid;
  202.         place-items: center;
  203.     }
  204.     @media(max-width:480px) {
  205.         .merit-title {
  206.             margin-top: 2rem;
  207.             margin-bottom: 2rem;
  208.         }
  209.     }
  210.     .merit-text {
  211.         font-size: max(16px, min(2vw,14px) );
  212.         color: #707070;
  213.         line-height: 1.6;
  214.         text-align: center;
  215.         max-width: 355px;
  216.         margin: 0 auto;
  217.     }
  218.     .merit-text__note {
  219.         font-size: max(14px, min(2vw,12px) );
  220.         color: #707070;
  221.         text-align: center;
  222.         line-height: 1.6;
  223.         max-width: 355px;
  224.         margin: 1.5em auto 0;
  225.     }
  226.     @media(max-width:991px) {
  227.         .merit-list {
  228.             gap: 45px 30px;
  229.         }
  230.         .merit-img {
  231.             max-width: 200px;
  232.         }
  233.     }
  234.     @media(max-width:880px) {
  235.         .merit-list {
  236.             grid-template-columns: repeat(1, 1fr);
  237.         }
  238.         .merit-title {
  239.             height: auto;
  240.         }
  241.     }
  242.     @media(max-width:480px) {
  243.         .merit-img {
  244.             max-width: 160px;
  245.         }
  246.     }
  247.     @media(min-width:1700px) {
  248.         .merit-text br,
  249.         .merit-text__note br {
  250.             display: block;
  251.         }
  252.     }
  253.     /*流れ*/
  254.     .step-title {
  255.         font-size: max(20px, min(2vw,24px) );
  256.         color: #707070;
  257.         font-weight: 600;
  258.         text-align: center;
  259.         margin: 0 0 40px 0;
  260.         line-height: 1.6;
  261.     }
  262.     .step-item {
  263.         background: #FAFAFA;
  264.         border-radius: 50px;
  265.         box-shadow: 3px 4px 6px rgb(0 0 0 / 16%);
  266.         padding: 50px;
  267.         margin-bottom: 100px;
  268.     }
  269.     .step-grid {
  270.         display: grid;
  271.         grid-template: auto / 1fr 40%;
  272.         gap: 20px 80px;
  273.     }
  274.     .step-item__text {
  275.         font-size: max(15px, min(2vw,18px) );
  276.         line-height: 1.6;
  277.     }
  278.     .step-item__note {
  279.         font-size: max(12px, min(1.6vw,14px) );
  280.         margin-top: 1em;
  281.     }
  282.     .step-item__text a {
  283.         text-decoration: underline;
  284.         color: #2A4ABF;
  285.     }
  286.     .step-picture {
  287.         text-align: center;
  288.         margin-top: 50px;
  289.     }
  290.     @media(max-width:991px) {
  291.         .step-grid {
  292.             gap: 20px 40px;
  293.         }
  294.     }
  295.     @media(max-width:740px) {
  296.         .step-grid {
  297.             grid-template-columns: repeat(1, 1fr);
  298.         }
  299.         .step-title {
  300.             margin-bottom: 15px;
  301.         }
  302.         .step-picture {
  303.             margin-top: 20px;
  304.         }
  305.     }
  306.     @media(max-width:480px) {
  307.         .step-item {
  308.             border-radius: 14px;
  309.             padding: 20px 15px;
  310.             margin-bottom: 40px;
  311.         }
  312.         .step-item__text,
  313.         .step-item__note {
  314.             max-width: 315px;
  315.             margin: 5px auto;
  316.             text-align: justify;
  317.         }
  318.         .step-photo {
  319.             max-width: 240px;
  320.             margin: 0 auto;
  321.         }
  322.     }
  323.     .furusatotax-footer {
  324.         padding: 50px 0 0 0;
  325.     }
  326.     .footer-text {
  327.         font-size: max(16px, min(3vw,20px) );
  328.         margin-bottom: 15px;
  329.         color: #707070;
  330.     }
  331.     .logo-soumu {
  332.         max-width: 150px;
  333.     }
  334.     @media(max-width:480px) {
  335.        .logo-soumu {
  336.             max-width: 97px;
  337.         } 
  338.     }
  339.     /* SP タブ*/
  340.     @media(max-width:480px) {
  341.         .page-nav__item .page-nav__link::after {
  342.             content: "";
  343.             display: block;
  344.             position: absolute;
  345.             bottom: 0;
  346.             left: 0;
  347.             right: 0;
  348.             width: 80%;
  349.             height: 4px;
  350.             background: #e3e3e3;
  351.             margin: 0 auto;
  352.         }
  353.         .page-nav__item.is-active .page-nav__link::after {
  354.             background: #63A7D5;
  355.         }
  356.         .page-section {
  357.             display: none;
  358.         }
  359.         .page-section.is-active {
  360.             display: block;
  361.         }
  362.     }
  364.     {# タブレット #}
  365.     @media(min-width:480px) and (max-width:880px) {
  366.         .page-nav__link {
  367.             font-size: 3vw;
  368.             padding: 10px 0;
  369.         }
  370.         .merit-list__item {
  371.             margin-bottom: 3.2rem;
  372.         }
  373.         .about-text p,
  374.         .about-note,
  375.         .merit-text__note,
  376.         .merit-text,
  377.         .step-item__text,
  378.         .step-item__note,
  379.         .footer-text {
  380.             font-size: max(18px, min(2.8vw,16px) );
  381.         }
  382.         .merit-title,
  383.         .step-title {
  384.             font-size: max(24px, min(4vw,20px) );
  385.             margin-top: 1rem;
  386.             margin-bottom: 1rem;
  387.         }
  388.         .merit-text,
  389.         .merit-text__note {
  390.             max-width: 80%;
  391.             margin: 0 auto 10px;
  392.         }
  393.         .step-item {
  394.             padding: 38px;
  395.         }
  396.     }
  397.     @media(max-width:880px) {
  398.         .merit-list__item br {
  399.             display: none;
  400.         }
  401.     }
  403.     .sp-br {
  404.         display: none;
  405.     }
  406.     @media(max-width:480px) {
  407.         .sp-br {
  408.             display: block;
  409.         }
  410.     }
  411. </style>
  413. <script>
  414.     (function(d) {
  415.     var config = {
  416.         kitId: 'rhd5jop',
  417.         scriptTimeout: 3000,
  418.         async: true
  419.     },
  420.     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)
  421.     })(document);
  423.     function switchByWidth() {
  424.         if (window.matchMedia('(max-width: 480px)').matches) {
  425.             // タブ
  426.             $('.js-tab').on('click', function(e) {
  427.                 e.preventDefault()
  429.                 $('.js-tab, .js-panel').removeClass('is-active');
  430.                 $(this).addClass('is-active');
  431.                 var index = $('.js-tab').index(this);
  432.                 $('.js-panel').eq(index).addClass('is-active');
  433.             });
  434.         }
  435.     }
  436.     window.onload = switchByWidth;
  437.     window.onresize = switchByWidth;
  438. </script>
  440. <div class="cocofuru-mv">
  441.     <img class="mv-photo" src="{{ asset('assets/img/help/about-furusatotax-mv.jpg') }}" alt="ふるさと納税とは？">
  442. </div>
  444. <div class="page-contents">
  445.     
  446.     <div class="page-heading">
  447.         <h2 class="page-title">ふるさと納税ガイド</h2>
  448.     </div>
  449.     
  450.     <ul class="page-nav">
  451.         <li class="page-nav__item js-tab is-active"><a class="page-nav__link" href="#about-furusatotax">ふるさと納税とは？</a></li>
  452.         <li class="page-nav__item js-tab"><a class="page-nav__link" href="#merit-cocofuru">メリット</a></li>
  453.         <li class="page-nav__item js-tab"><a class="page-nav__link" href="#step-cocofuru">ふるさと納税の流れ</a></li>
  454.     </ul>
  456.     <div class="container">
  457.         
  458.         <div class="page-wrap">
  459.         
  460.             <div id="about-furusatotax" class="page-section js-panel is-active">
  461.                 <h3 class="section-heading">ふるさと納税とは？</h3>
  462.                 <div class="about-box">
  463.                     <div class="about-text">
  464.                         <p>ふるさと納税とは、本来自分の住まいがある自治体に納税する税金を、生まれた故郷や応援したい自治体に寄付ができる制度です。</p>
  465.                         <p>手続きを行うと、寄附金のうち2,000円を超える部分については所得税の還付や住民税の控除が受けられます。自分自身で寄付金の使い道を指定でき、地域の名産品などのお礼の品もいただける魅力的な仕組みです。</p>
  466.                     </div>
  467.                     <div class="about-picture">
  468.                         <img src="{{ asset('assets/img/help/about-furusatotax.png') }}" alt="ふるさと納税の仕組み">
  469.                     </div>
  470.                     <p class="about-note">※ワンストップ特例制度をご利用の場合は所得税の還付はございません。</p>
  471.                 </div>
  472.             </div>
  473.             
  474.             <div id="merit-cocofuru" class="page-section js-panel">
  475.                 <h3 class="section-heading">メリット</h3>
  476.                 <div class="merit-box">
  477.                     <ul class="merit-list">
  478.                         <li class="merit-list__item">
  479.                             <div class="merit-img">
  480.                                 <img src="{{ asset('assets/img/help/merit-furusatotax-01.png') }}" alt="">
  481.                             </div>
  482.                             <h3 class="merit-title">応援したい自治体に<br>寄附できる</h3>
  483.                             <p class="merit-text">自分自身の住まいの地域に限らず、<br>故郷や復興支援をしたい地域など<br>日本全国の自治体に寄附できます。</p>
  484.                         </li>
  485.                         <li class="merit-list__item">
  486.                             <div class="merit-img">
  487.                                 <img src="{{ asset('assets/img/help/merit-furusatotax-02.png') }}" alt="">
  488.                             </div>
  489.                             <h3 class="merit-title">お礼の品がもらえる</h3>
  490.                             <p class="merit-text">応援した自治体の名産品や<br>アクティビティなどを<br>お礼の品として<br>もらうことができます。</p>
  491.                         </li>
  492.                         <li class="merit-list__item">
  493.                             <div class="merit-img">
  494.                                 <img src="{{ asset('assets/img/help/merit-furusatotax-03.png') }}" alt="">
  495.                             </div>
  496.                             <h3 class="merit-title">所得税と住民税から<br>税金が控除される</h3>
  497.                             <p class="merit-text">控除上限内であれば、<br>寄附金額から2,000円を<br>引いた額が税金の控除を<br>受けることができます。</p>
  498.                         </li>
  499.                         <li class="merit-list__item">
  500.                             <div class="merit-img">
  501.                                 <img src="{{ asset('assets/img/help/merit-furusatotax-04.png') }}" alt="">
  502.                             </div>
  503.                             <h3 class="merit-title">寄附金の<br>使い道が選べる</h3>
  504.                             <p class="merit-text">寄附金を復興支援や<br>まちづくりなどどのように<br>自治体が使用するのか、用途を選択することができます。</p>
  505.                             <p class="merit-text__note">※ワンストップ特例制度を<br>ご利用の場合は所得税の還付は<br>ございません。</p>
  506.                         </li>
  507.                     </ul>
  508.                 </div>
  509.             </div>
  510.             
  511.             <div id="step-cocofuru" class="page-section js-panel">
  512.                 <h3 class="section-heading">ふるさと納税の流れ</h3>
  513.                 <div class="step-box">
  514.                     
  515.                     <h4 class="step-title">STEP 1<br>控除上限額の確認</h4>
  516.                     <div class="step-item">
  517.                         <div class="step-inner">
  518.                             <p class="step-item__text">「ふるさと納税」で控除される金額は、年収は家族構成によって異なります。まず寄附を行う前に、納税寄付額の目安を表で確認しましょう。<br>
  519.                             確認は、『<a href="https://www.soumu.go.jp/main_sosiki/jichi_zeisei/czaisei/czaisei_seido/furusato/mechanism/deduction.html" target="_blank">総務省 ふるさと納税ポータルサイト</a>』をご確認ください。</p>
  520.                         </div>
  521.                     </div>
  522.                     
  523.                     <h4 class="step-title">STEP 2<br>応援したい自治体のお礼の品を選ぶ</h4>
  524.                     <div class="step-item">
  525.                         <div class="step-inner">
  526.                             <div class="step-grid">
  527.                                 <div class="step-textbox">
  528.                                     <p class="step-item__text">旅先で見つけた「ココふる」のサイトからスマートフォンで申し込みをします。クレジットカードで決済ができ、その場ですぐにご利用できますのでご自宅への郵送もなく気軽にお申し込みいただけます。</p>
  529.                                     <p class="step-item__note">※申し込みの段階で「ワンストップ特例制度」を行う場合は、サイト上でご選択ください。</p>
  530.                                 </div>
  531.                                 <div class="step-photo">
  532.                                     <img src="{{ asset('assets/img/help/step-furusatotax-01.jpg') }}" alt="">
  533.                                 </div>
  534.                             </div>
  535.                         </div>
  536.                     </div>
  537.                     
  538.                     <h4 class="step-title">STEP 3<br>自治体様からお礼の品と書類を<br class="sp-br">受け取る</h4>
  539.                     <div class="step-item">
  540.                         <div class="step-inner">
  541.                             <div class="step-grid">
  542.                                 <div class="step-textbox">
  543.                                     <p class="step-item__text">旅先ですぐにお礼の品（体験）をご利用いただきます。後に、その証明として寄附金の領収書「寄附金受領証明書」がご自宅に届きます。確定申告に関する重要な書類ですので、確定申告を行う場合は大切に保管してください。</p>
  544.                                 </div>
  545.                                 <div class="step-photo">
  546.                                     <img src="{{ asset('assets/img/help/step-furusatotax-02.jpg') }}" alt="">
  547.                                 </div>
  548.                             </div>
  549.                         </div>
  550.                     </div>
  551.                     
  552.                     <h4 class="step-title">STEP 4<br>寄附金の控除手続きを行う</h4>
  553.                     <div class="step-item">
  554.                         <div class="step-inner">
  555.                             <p class="step-item__text">寄附金控除の申請方法は「ワンストップ特例制度」と「確定申告」の２つの方法があります。<br>
  556.                             STEP１で調べた控除上限額内の2,000円を超える部分について税金が控除されます。</p>
  557.                             <div class="step-picture">
  558.                                 <img src="{{ asset('assets/img/help/step-furusatotax.png') }}" alt="">
  559.                             </div>
  560.                         </div>
  561.                     </div>
  562.                     
  563.                 </div>
  564.                 
  565.                 <div class="furusatotax-footer">
  566.                     <p class="footer-text">詳しくは、総務省が運営する『総務省 ふるさと納税ポータルサイト』をご覧ください。</p>
  567.                     <div class="logo-soumu">
  568.                         <a href="https://www.soumu.go.jp/main_sosiki/jichi_zeisei/czaisei/czaisei_seido/080430_2_kojin.html" target="_blank"><img src="{{ asset('assets/img/help/logo-soumu.jpg') }}" alt="総務省 ふるさと納税ポータルサイト"></a>
  569.                     </div>
  570.                 </div>
  571.             
  572.             </div>
  573.     
  574.         </div>
  575.     </div>
  576.     {#container#}
  577.     
  578. </div>
  580. {% endblock %}