{{ block title }}
調査
{{ endblock }}
{{ block content }}

<p><strong>以下の質問にお答えください。</strong></p>


<div class="group">
    <table>
        <tr>
            <td colspan="7">
                <p>(1-1) 情報を収集したり調べたりするとき、どのサイトまたはアプリを用いますか</p>
            </td>
        </tr>
        <tr>
             <td>
            <input type="checkbox"  name="app1_1" id="app1_1" />
            <label for="app1_1">Google</label>
          </td>
          <td>
            <input type="checkbox"  name="app1_2" id="app1_2" >
            <label for="app1_2">Duckduckgo</label>
          </td>
          <td>
            <input type="checkbox"  name="app1_3" id="app1_3" >
            <label for="app1_3">Yahoo!</label>
          </td>
          <td>
            <input type="checkbox"  name="app1_4" id="app1_4" />
            <label for="app1_4">Bing</label>
          </td>
          <td>
            <input type="checkbox"  name="app1_5" id="app1_5" >
            <label for="app1_5">goo</label>
          </td>
          <td>
            <input type="checkbox"  name="app1_6" id="app1_6" >
            <label for="app1_6">SNS (Twitter、LINEなど)</label>
          </td>
          <td>
            <input type="checkbox"  name="app1_7" id="app1_7" />
            <label for="app1_7">その他</label>
          </td>
        </tr>
    </table>
    </div>
    <p>(1-2) 「その他」を選んだ方は何を使用しているかお書きください</p>
    <input name="app1_e" type="text" size="40" placeholder="回答を入力" />
    <br>
    <br>


    <div class="group">
        <table>
            <tr>
                <td colspan="7">
                    <p>(1-3) (1-1)で「SNS」を選んだ方にお尋ねします。実際に利用されているSNSをすべてお選びください。</p>
                </td>
            </tr>
            <tr>
                 <td>
                <input type="checkbox"  name="app2_1" id="app2_1" />
                <label for="app2_1">Twitter</label>
              </td>
              <td>
                <input type="checkbox"  name="app2_2" id="app2_2" >
                <label for="app2_2">Instagram</label>
              </td>
              <td>
                <input type="checkbox"  name="app2_3" id="app2_3" >
                <label for="app2_3">Facebook</label>
              </td>
              <td>
                <input type="checkbox"  name="app2_4" id="app2_4" />
                <label for="app2_4">LinkedIn</label>
              </td>
              <td>
                <input type="checkbox"  name="app2_5" id="app2_5" >
                <label for="app2_5">Mixi</label>
              </td>
              <td>
                <input type="checkbox"  name="app2_6" id="app2_6" >
                <label for="app2_6">その他</label>
              </td>
            </tr>
        </table>
        </div>
    <p>(1-4) (1-3)で「その他」を選んだ方：実際に利用されているSNSの名称をお答えください。</p>
    <input name="app2_e" type="text" size="40" placeholder="回答を入力" />
    <br>
    <br>
    <p>(2) 普段 Web 検索をする際、パソコンをどれくらい使いますか</p>
    <table >
          <tr>
              {{ form.app3_1 }}
          </tr>
  </table>
  <br>
  <p>(3) 普段 Web 検索をする際、携帯・スマートフォンをどれくらい使いますか</p>
    <table >
          <tr>
              {{ form.app3_2 }}
          </tr>
  </table>
  <br>
  <p>(4) 普段 Web 検索をする際、スマートスピーカーをどれくらい使いますか</p>
    <table >
          <tr>
              {{ form.app3_3 }}
          </tr>
  </table>
  <br>
  <p>(5) 普段 Web 検索をする際、ゲーム機をどれくらい使いますか</p>
    <table >
          <tr>
              {{ form.app3_4 }}
          </tr>
  </table>
  <br>
  <p>(6) 普段 Web 検索をする際、タブレット端末（iPadやAndroidタブレット等）をどれくらい使いますか</p>
    <table >
          <tr>
              {{ form.app3_5 }}
          </tr>
  </table>
  <br>
    {{ next_button }}

    <style>
        body {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          min-height: 100vh;
          color: black;
        }
        
        
        .group {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          margin-bottom: 2em;
        }
        
        input[type="checkbox"],
        input[type="radio"] {
          position: absolute;
          opacity: 0;
          z-index: -1;
        }
        
        label {
          position: relative;
          margin-right: 1em;
          padding-left: 2em;
          padding-right: 1em;
          line-height: 2;
          cursor: pointer;
        }
        
        label:before {
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          content: " ";
          position: absolute;
          top: 0.3em;
          left: 0;
          display: block;
          width: 1.4em;
          height: 1.4em;
          border: 2px solid black;
          border-radius: .25em;
          z-index: -1;
        }
        
        input[type="radio"] + label::before {
          border-radius: 1em;
        }
        
        /* Checked */
        input[type="checkbox"]:checked + label,
        input[type="radio"]:checked + label {
          padding-left: 1em;
          color: white;
        }
        
        input[type="checkbox"]:checked + label:before,
        input[type="radio"]:checked + label:before {
          top: 0;
          width: 100%;
          height: 2em;
          background: black;
        }
        
        /* Transition */
        label,
        label::before {
          -webkit-transition: .25s all ease;
          transition: .25s all ease;
        }
        /*# sourceMappingURL=main.css.map */
        </style>
        
{{ endblock }}