templates/individual/index.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <meta name="keywords" content="MIKAWA ARENA">
            <meta name="description" content="みんなのアリーナで、三河のMIRAIを!三河のMIRAIをつくる募金 2025年10月開始!">
    
            <meta property="og:title" content="TEAM MIKAWA みんなのアリーナ | 三河安城交流拠点建設募金団体">
            <meta property="og:type" content="website">
            <meta property="og:url" content="https://mikawa-arena.jp/">
            <meta property="og:image" content="https://mikawa-arena.jp/assets/img/ogp.jpg">
            <meta property="og:description" content="みんなのアリーナで、三河のMIRAIを!三河のMIRAIをつくる募金 2025年10月開始!">
    
            <meta name="twitter:card" content="summary_large_image">
            <meta name="twitter:title" content="TEAM MIKAWA みんなのアリーナ | 三河安城交流拠点建設募金団体">
            <meta name="twitter:image" content="https://mikawa-arena.jp/assets/img/ogp.jpg">
            <meta name="twitter:description" content="みんなのアリーナで、三河のMIRAIを!三河のMIRAIをつくる募金 2025年10月開始!">
    
            <title>TEAM MIKAWA みんなのアリーナ | 三河安城交流拠点建設募金団体</title>
    
            <link rel="canonical" href="https://mikawa-arena.jp/news/">
            <link rel="icon" href="/assets/img/favicon.ico">
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap" rel="stylesheet">
    
        <link rel="stylesheet" href="/assets/css/common.css">
    <link rel="stylesheet" href="/assets/css/swiper-bundle.css">
    <link rel="stylesheet" href="/assets/css/donation.css">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <style>
    
    h3 span {
        font-size: 0.8em;
        font-weight: normal;
    }
    .year {
        width: 8em !important;
    }
    .month {
        width: 6em !important;
    }
    .day {
        width: 6em !important;
    }
    .g-recaptcha div {
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .birth {
        white-space: nowrap;
    }
    .birth span {
        min-width: 5.0em !important;
        width: 8em !important;
    }
    .birth select {
        width: 100%;
    }
    
    .error > ul li {
        margin-top: .5em;
        padding-left: 1.4em;
        background: url(/assets/img/common/icon_error0.svg) no-repeat left center / auto 1em;
        line-height: 1.5;
        font-size: .9em;
        font-weight: 500;
        color: #f37e8b;
    }
    .is_public.hide {
        display: none;
    }
    @media (max-width: 767px) {
        .birth span {
            min-width: 5.0em !important;
            width: 6.7em !important;
        }
        select {
            padding-right: 10px !important;
        }
    }
    
    </style>
    
    </head>
        <body>
            <script type="module" src="/assets/js/common.js"></script>
            
        <header>
        <div class="inner">
            <h2 class="logo"><a href="/"><img src="/assets/img/common/logo0.svg" alt="MIKAWA ARENA" width="132" height="101"></a></h2>
    
            <nav>
                <ul>
                    <li><a href="/news/">ニュース</a></li>
                    <li><a href="/concept/">アリーナのコンセプト</a></li>
                    <li><a href="/faq/">よくあるご質問</a></li>
                    <li><a href="/contact/">お問い合わせ</a></li>
                    <li><a href="/special/">特集</a></li>
                </ul>
                <div class="btns"><a class="btn" href="/donation/">寄附の申し込み</a></div>
                <div id="btn-menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
        </div>
        
        <div id="menu">
            <h2><img src="/assets/img/common/logo1.svg" alt="MIKAWA ARENA" width="132" height="101"></h2>
            <div class="inner">
                <nav class="menu">
                    <ul>
                        <li><a href="/"><b>Top</b>トップページ</a></li>
                        <li><a href="/news/"><b>News</b>ニュース</a></li>
                        <li><a href="/concept/"><b>Concept</b>アリーナのコンセプト</a></li>
                        <li>
                            <a href="/donation/"><b>Donation</b>三河のMIRAIをつくる募金</a>
                            <ul>
                  <li><a href="/donation/individual/">個人による寄附</a></li>
                  <li><a href="/donation/corporation/">法人による寄附</a></li>
                            </ul>
                        </li>
                        <li><a href="/faq/"><b>FAQ</b>よくあるご質問</a></li>
                        <li><a href="/contact/"><b>Contact</b>お問い合わせ</a></li>
                        <li><a href="/special/"><b>Special</b>アリーナができるまで</a></li>
                        <li><a href="/about/"><b>About Us</b>募金団体について</a></li>
                    </ul>
                </nav>
    
                <div class="btns">
                    <div class="policy">
                        <ul>
                        <li><a href="/privacy/">個人情報保護方針</a></li>
                        <li><a href="/tradelaw/">特定商取引法に基づく表記</a></li>
                        </ul>
                    </div>
                    <div class="sns">
                        <ul>
                            <li><a href="https://x.com/mikawa_arena" target="_blank"><img src="/assets/img/common/icon_x1.svg" alt="X" width="24" height="24"></a></li>
                <li><a href="https://www.instagram.com/mikawa_arena" target="_blank"><img src="/assets/img/common/icon_instagram1.svg" alt="Instagram" width="24" height="24"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>
        <main class="individual">
            <section id="head">
                <div class="inner">
                    <h1 class="ttl">
                        Donation<span class="jp">個人による寄附</span>
                    </h1>
                </div>
            </section>
    
            <section class="step">
                <div class="inner">
                    <div class="inner">
                        <div>
                            <b class="step1"></b>
                            <ol>
                                <li class="act">申込情報の入力</li>
                                <li>申込内容の確認</li>
                                <li>申込完了</li>
                                <li>メール確認</li>
                                <li>決済</li>
                                <li>寄附完了</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </section>
    
            
            {{ form_start(form) }}
            {% set formErrors = form.vars.errors.form.getErrors(true) %}
            {{ form_widget(form.status) }}
            <input type="hidden" class="p-country-name" value="Japan">
            <section>
                <div class="inner">
                    <div class="inner">
                        <h2 class="ttl">寄附者情報入力</h2>
    
                        <table>
                            <tr>
                                <th>
                                    お名前
                                    <b>領収書の宛名になります</b>
                                </th>
                                {% if form.lastname.vars.errors|length > 0 or form.firstname.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="name"><b>姓</b>{{ form_widget(form.lastname) }}</span>
                                    <span class="name"><b>名</b>{{ form_widget(form.firstname) }}</span>
                                    <div class="error">
                                    {{ form_errors(form.lastname) }}
                                    {{ form_errors(form.firstname) }}
                                    </div>
                                    
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    お名前 [フリガナ]
                                </th>
                                {% if form.lastname_kana.vars.errors|length > 0 or form.firstname_kana.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="name"><b>セイ</b>{{ form_widget(form.lastname_kana) }}</span>
                                    <span class="name"><b>メイ</b>{{ form_widget(form.firstname_kana) }}</span>
                                    <div class="error">
                                    {{ form_errors(form.lastname_kana) }}
                                    {{ form_errors(form.firstname_kana) }}
                                    </div>
                                </td>
                            </tr>
    
                            <tr>
                                <th>
                                    お名前 [ローマ字]
                                </th>
                                {% if form.firstname_roman.vars.errors|length > 0 or form.lastname_roman.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="name"><b>First</b>{{ form_widget(form.firstname_roman) }}</span>
                                    <span class="name"><b>Last</b>{{ form_widget(form.lastname_roman) }}</span>
                                    <div class="error">
                                    {{ form_errors(form.firstname_roman) }}
                                    {{ form_errors(form.lastname_roman) }}
                                    </div>
                                </td>
                            </tr>
    
                            <tr>
                                <th>
                                    メールアドレス
                                    <b>※@mikawa-arena.jpの<br>ドメイン制限を外してください</b>
                                </th>
                                {% if form.email.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="email">{{ form_widget(form.email) }}</span>
                                    <div class="error">
                                    {{ form_errors(form.email) }}
                                    </div>
                                    <p class="cap">確認のためにもう一度入力してください</p>
                                    <span class="email">{{ form_widget(form.email02, {
                                        'attr': {
                                            'oncopy': "return false",
                                            'onpaste': "return false",
                                            'oncontextmenu': "return false"
                                        }
                                    }) }}</span>
                                    <div class="error">
                                    {{ form_errors(form.email02) }}
                                    </div>
                                    
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    生年月日
                                </th>
                                {% if form.year.vars.errors|length > 0 or form.month.vars.errors|length > 0 or form.day.vars.errors|length > 0 %}<td class="birth error">{% else %}<td class="birth">{% endif %}
                                    <span class="year">{{ form_widget(form.year) }}</span>
                                    <span class="month">
                                        {{ form_widget(form.month) }}
                                    </span>
                                    <span class="day">{{ form_widget(form.day) }}</span>
                                    <div class="error">
                                    {{ form_errors(form.year) }}
                                    {{ form_errors(form.month) }}
                                    {{ form_errors(form.day) }}
                                    </div>
                                </td>
                            </tr>
                            
                            <tr>
                                <th>
                                    郵便番号
                                </th>
                                {% if form.zip0.vars.errors|length > 0 or form.zip1.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="zip"><b>〒</b>{{ form_widget(form.zip0) }}</span>
                                    <span class="zip"><b>-</b>{{ form_widget(form.zip1) }}</span>
    
                                    <input type="hidden" class="p-region" readonly><input type="hidden" class="p-locality" readonly><input type="hidden" class="p-street-address"><input type="hidden" class="p-extended-address">
                                    <div class="error">
                                    {{ form_errors(form.zip0) }}
                                    {{ form_errors(form.zip1) }}
                                    </div>
                                </td>
                            </tr>
    
                            <tr>
                                <th>
                                    都道府県
                                </th>
                                {% if form.prefecture.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="address">
                                        {{ form_widget(form.prefecture) }}
                                    </span>
                                    <div class="error">
                                    {{ form_errors(form.prefecture) }}
                                    </div>
                                </td>
                            </tr>
    
                            <tr>
                                <th>
                                    市区町村/番地
                                </th>
                                {% if form.address.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="address">
                                        {{ form_widget(form.address) }}
                                    </span>
                                    <div class="error">
                                    {{ form_errors(form.address) }}
                                    </div>
                                </td>
                            </tr>
    
                            <tr>
                                <th>
                                    建物名/部屋番号
                                </th>
                                <td>
                                    <span class="address option">
                                        {{ form_widget(form.address_option) }}
                                    </span>
                                    <div class="error">
                                    {{ form_errors(form.address_option) }}
                                    </div>
                                    <p class="note">領収書への記載、寄附特典等の発送の際に必要になりますのでご記載ください</p>
                                </td>
                            </tr>
                            
                            <tr>
                                <th>
                                    電話番号
                                </th>
                                {% if form.tel.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="tel">{{ form_widget(form.tel) }}<b class="cap">ハイフンは不要です</b></span>
                                    <div class="error">
                                    {{ form_errors(form.tel) }}
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </section>
    
            <section>
                <div class="inner">
                    <div class="inner">
                        <h2 class="ttl">寄附金額の入力</h2>
    
                        <table>
                            <tr>
                                <th>
                                    ご寄附金額
                                </th>
                                {% if form.amount.vars.errors|length > 0 %}<td class="error">{% else %}<td>{% endif %}
                                    <span class="amount">{{ form_widget(form.amount) }}円</span>
                                    <div class="error">
                                    {{ form_errors(form.amount) }}
                                    </div>
                                    <p class="note">寄附金額は1,000円からとさせていただきます。</p>
    
                                    <div class="box">
                                        <h3>寄附特典</h3>
                                        <ul>
                                            <li>
                                                <h4>1,000~9,999円</h4>
                                                <div>
                                                    <p>寄附特典はございません</p>
                                                </div>
                                            </li>
                                            <li>
                                                <h4>10,000円~29,999円</h4>
                                                <div>
                                                    <p>特典① シリアルナンバー入り記念カード<br>
                                                        特典② 施設完成後の内覧会へのご招待</p>
                                                </div>
                                            </li>
                                            <li>
                                                <h4>30,000円~</h4>
                                                <div>
                                                    <p>特典① シリアルナンバー入り記念カード<br>
                                                        特典② 施設完成後の内覧会へのご招待<br>
                                                        特典③ アリーナに寄附者名を掲出<br>
                                                        (芳名板やネームプレートの予定)</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
    
                                    <div id="js_is_public" class="is_public hide">
                                        <h3 style="margin-bottom: 1em;">アリーナへの寄附者名の掲出を希望されますか?<br><span>※公表時期は未定です。</span></h3>
                                        <span class="radio">
                                            {{- form_widget(form.is_public[0], {
                                                'attr': {
                                                    'id': 'is_public1'
                                                }
                                            }) -}}
                                            {{- form_label(form.is_public[0], null) -}}
                                        </span>
                                        <span class="radio">
                                            {{- form_widget(form.is_public[1], {
                                                'attr': {
                                                    'id': 'is_public2'
                                                }
                                            }) -}}
                                            {{- form_label(form.is_public[1], null) -}}
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </section>
    
            <section>
                <div class="inner">
                    <div class="inner">
                        <div class="notice">
                            <h2><span>注意事項</span></h2>
                            <div class="body">
                                <ul>
                                    <li><p>当募金団体への寄附に対する寄附金控除を受けるためには、確定申告をしていただく必要がございます。ただし、確定申告を行う場合は、ふるさと納税のワンストップ特例申請が無効になりますので、確定申告を行う際には、ふるさと納税分もあわせて申告してください。</p></li>
                                    <li><p>同一の方が、複数口のご寄附を希望される場合は、お手数ですが複数回に分けてお申込み手続きをお願いいたします。</p></li>
                                    <li><p>寄附特典は一回の寄附金額に応じたものとなり、寄附金額の通算はできません。</p></li>
                                    <li><p>同一の方が複数回寄附をされた場合であっても、各寄附特典の提供はおひとり様につき、それぞれ一回までとさせていただきます。</p></li>
                                    <li><p>アリーナへの寄附者名の掲出(寄附金額3万円以上の方が対象)について、表記するお名前は寄附者名に入力いただいたお名前と同一のものになります。</p></li>
                                    <li><p>グループ名で寄附をされる場合は、寄附者名の「姓」の欄に20文字以内でグループ名をご入力の上、「名」の欄に「なし」、「セイ」の欄にフリガナ、「メイ」に「ナシ」、「First」に「n」、「Last」に「n」とご入力ください。<br>なお、その場合、領収書の宛名はグループ名での発行となります。</p></li>
                                    <li><p>当募金団体が発行する領収書の宛名は、寄附者名に入力いただいたお名前と同一のものになります。<br>
                                    なお、寄附金控除を受ける場合、ご本人名義の領収書が必要となりますので、必ず寄附者ご本人のお名前をご入力ください。</p></li>
                                    <li><p>寄附のお申込み完了後、いかなる理由があっても寄附者名および芳名板に記載するお名前、領収書の宛名を変更することはできませんのでご注意ください。</p></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
    
            <section class="submit">
                <div class="inner">
                    <div class="inner_s left">
                        <div class="g-recaptcha" data-sitekey="6Lf95LMrAAAAABf9ael97XmiBkzfKbjFFSdSDiIE" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
                        {{ form_widget(form.save, { 'label': '申込内容確認画面へ進む' }) }}
                    </div>
                </div>
            </section>
    
            {{ form_end(form) }}
        </main>
        <footer>
        <div class="inner">
        <div>
          <div class="head">
            <img src="/assets/img/common/logo0.svg" alt="MIKAWA ARENA" width="177" height="132">
            <div class="sns">
              <ul>
                <li><a href="https://x.com/mikawa_arena" target="_blank"><img src="/assets/img/common/icon_x0.svg" alt="X" width="24" height="24"></a></li>
                <li><a href="https://www.instagram.com/mikawa_arena" target="_blank"><img src="/assets/img/common/icon_instagram0.svg" alt="Instagram" width="24" height="24"></a></li>
              </ul>
            </div>
          </div>
    
          <nav class="menu">
            <ul>
              <li><a href="/"><b>Top</b>トップページ</a></li>
              <li><a href="/news/"><b>News</b>ニュース</a></li>
              <li><a href="/concept/"><b>Concept</b>アリーナのコンセプト</a></li>
              <li>
                <a href="/donation/"><b>Donation</b>三河のMIRAIをつくる募金</a>
                <ul>
                  <li><a href="/donation/individual/">個人による寄附</a></li>
                  <li><a href="/donation/corporation/">法人による寄附</a></li>
                </ul>
              </li>
              <li><a href="/faq/"><b>FAQ</b>よくあるご質問</a></li>
              <li><a href="/contact/"><b>Contact</b>お問い合わせ</a></li>
              <li><a href="/special/"><b>Special</b>アリーナができるまで</a></li>
              <li><a href="/about/"><b>About Us</b>募金団体について</a></li>
            </ul>
          </nav>
    
          <div class="bnrs">
            <ul>
              <li>
                <a href="https://go-seahorses.jp/" target="_blank">
                  <img src="/assets/img/common/bnr0.png" alt="" width="190" height="160">
                </a>
              </li>
            </ul>
          </div>
        </div>
    
        <div class="copy">
          <ul>
          <li><a href="/privacy/">個人情報保護方針</a></li>
          <li><a href="/tradelaw/">特定商取引法に基づく表記</a></li>
          </ul>
          <p>
            ©三河安城交流拠点建設募金団体
          </p>
        </div>
        
        </div>
    </footer>
    
        <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
        <script type="module" src="./assets/js/donation-individual.js"></script>
    
    
    <script>
    
    var form_zip0 = document.getElementById('form_zip0');
    var form_zip1 = document.getElementById('form_zip1');
    var form_tel = document.getElementById('form_tel');
    var form_amount = document.getElementById('form_amount');
    var js_is_public = document.getElementById('js_is_public');
    
    var form_prefecture = document.getElementById('form_prefecture');
    var form_address = document.getElementById('form_address');
    var form_address_option = document.getElementById('form_address_option');
    
    var firstname_roman = document.getElementById('form_firstname_roman');
    var lastname_roman = document.getElementById('form_lastname_roman');
    var form_email = document.getElementById('form_email');
    var form_email02 = document.getElementById('form_email02');
    
    firstname_roman.addEventListener('change', (e) => replaceHankaku(e));
    lastname_roman.addEventListener('change', (e) => replaceHankaku(e));
    form_zip0.addEventListener('change', (e) => replaceHankaku(e));
    form_zip1.addEventListener('change', (e) => replaceHankaku(e));
    form_email.addEventListener('change', (e) => replaceHankaku(e));
    form_email02.addEventListener('change', (e) => replaceHankaku(e));
    form_tel.addEventListener('change', (e) => replaceHankaku(e));
    form_address.addEventListener('change', (e) => replaceHankaku(e));
    form_address_option.addEventListener('change', (e) => replaceHankaku(e));
    form_amount.addEventListener('change', (e) => replaceHankaku(e));
    
    document.getElementById("form_save").disabled = true;
    
    function checkAmount () {
    
        const replaced = form_amount.value.replace(/,/g, '')
        
        if ( Number(replaced) >= 30000 ) {
            js_is_public.classList.remove('hide');
        } else {
            js_is_public.classList.add('hide');
        }
    }
    
    
    function checkZipCode () {
        var zipCode = form_zip0.value + form_zip1.value;
        if ( zipCode.length == 7 ) getAddress (zipCode);
    }
    
    async function getAddress (zipCode) {
        const data = await fetch("https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + zipCode);
          const res = await data.json();
        
        
        console.log('res', res);
        
        if ( res.results.length > 0 ) {
            var obj = res.results[0];
            form_prefecture.value = obj.prefcode;
            form_address.value = obj.address2 + obj.address3;
        }
        
    }
    
    function fixTelephone () {
        form_tel.value = form_tel.value.replace(/-/g, '');
    }
    
    function updateTextView(e, item){
        console.log('e', e);
        var num = getNumber(e.target.value);
        if(num==0){
            item.value = '';
        }else{
            item.value = num.toLocaleString();
        }
    }
    
    function getNumber(_str){
        var arr = _str.split('');
        var out = new Array();
        for(var cnt=0;cnt<arr.length;cnt++){
            if(isNaN(arr[cnt])==false){
                out.push(arr[cnt]);
            }
        }
        return Number(out.join(''));
    }
    
    function replaceHankaku (e) {
        //e.target.value = e.target.value.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); });
        //console.log('replaceHankaku', e.target.value);
    
        // 半角変換
        var halfVal = e.target.value.replace(/[!-~]/g,
            function( tmpStr ) {
            // 文字コードをシフト
            return String.fromCharCode( tmpStr.charCodeAt(0) - 0xFEE0 );
            }
        );
        
        // 文字コードシフトで対応できない文字の変換
        e.target.value = halfVal.replace(/”/g, "\"")
            .replace(/’/g, "'")
            .replace(/‘/g, "`")
            .replace(/¥/g, "\\")
            .replace(/ /g, " ")
            .replace(/〜/g, "~");
    }
    
    
    form_zip0.addEventListener('input', () => checkZipCode());
    form_zip1.addEventListener('input', () => checkZipCode());
    form_tel.addEventListener('change', () => fixTelephone());
    form_amount.addEventListener('input', () => checkAmount());
    setTimeout( checkAmount, 500 );
    
    var paymentForm = document.querySelectorAll('input.amount');
    
    paymentForm.forEach((item) => {
        console.log('item', item);
        item.addEventListener('change', (e) => updateTextView(e, item));
    });
    
    
    </script>
    
    <script> 
      var verifyCallback = function(response) {
        document.getElementById("form_save").disabled = false;
      };
      var expiredCallback = function() {
        document.getElementById("form_save").disabled = true;
      };
    </script>
    
    
    </body>
    </html>