{{ block title }}
    同調志向
{{ endblock }}

{{ block content }}

<h1>以下の質問にご回答ください</h1>
<div class="box20">
<p>
    あなたが<strong>あなたの周りに人たちと普段どのように接しているのか</strong>、当てはまらないから当てはまるの間でお答えください。
</p>
</div>

    
    <p><font size='5'>1. 集団で話し合ったり何かするときは，率先して自分の意見を言う方だ</font></p>
    <div class="box2">
    <table>
          <tr>
              {{ form.D1 }}
          </tr>
    </table>
    </div>

<div class="box2">
    <p>2. 私は，グループに対して反対意見を容易に言うことができる</p>
    
    <table>
          <tr>
              {{ form.D2 }}
          </tr>
  </table>
</div>
    {{ next_button }}



<style>
    h1 {
        background: linear-gradient(transparent 70%, #a7d6ff 70%);
    }
    p {
        margin:  0;                 /* デフォルトCSS打ち消し */
        line-height: 2;             /* 行間調整 */
        font-size: 25px
    }
    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="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="radio"]:checked + label {
        padding-left: 1em;
        color: rgb(165, 10, 10);
    }
    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 */
    
    
    .box20 {
    position: relative;
    padding: 0.25em 1em;
    margin: 2em 0;
    top: 0;
    background: #efefef;
    }
    .box20:before, .box20:after{ 
        position: absolute;
        top: 0;
        content:'';
        width: 10px;
        height: 100%;
        display: inline-block;
        box-sizing: border-box;
    }
    .box20:before{
        border-left: dotted 2px #6091d3;
        border-top: dotted 2px #6091d3;
        border-bottom: dotted 2px #6091d3;
        left: 0;
    }
    .box20:after{
        border-top: dotted 2px #6091d3;
        border-right: dotted 2px #6091d3;
        border-bottom: dotted 2px #6091d3;
        right: 0;
    }
    .box20 p {
        margin: 0; 
        padding: 0;
    }

    .box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
    font-size: 25px;
}
.box2 p {
    margin: 0; 
    padding: 0;
}
</style>
{{ endblock }}