@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);


    body {
        margin:0;
        padding:0;
        font-size:15px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight:600;
        line-height:1.8;
    }

    #header{
        position:relative;
        background-image:url("../images/bg_page_top_yellow_pc.jpg");
        background-repeat: no-repeat;
        background-size:100% 336px;
        width:100%;
        height:336px;
        margin:auto;
    }

    #logo_original{
        height:70px;
        position:absolute;
        top:10%;
        left:3%;
    }

    #header_navi{
        position:absolute;
        top:20%;
        left:50%;
        transform: translate(-50%,-50%);
        width:620px;
        height:70px;
        text-align:center;
        background-color:white;
        border-radius:50px;
        line-height:70px;
        box-shadow: 0px 0px 5px 0px rgb(186, 182, 182);
    }

    #header_navi ul{
        /* list-style:none; */
        padding:0;
        margin:0 auto;
        height:70px;
    }

    #header_navi li{
        display:inline;
        height:50px;
        margin:0 27px;
        display:inline-block;
        border-radius:50px;
        width:15%;
        line-height:50px;
    }

    #header_navi li#shindan{
        background-color:#FED700;
    }
    
    #header_navi a{
        color:black;
        text-decoration:none;
    }

    #diagnose{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        color:white;
        font-size:72px;
        font-family: 'Helvetica Neue',sans-serif;
    }

    #header_shindan{
        position:absolute;
        top:87%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:22px;
    }

    #diagnose_man1{
        position:absolute;
        height:100px;
        right:25%;
        bottom:15%;
    }

    #explain{
        width:756px;
        margin:auto;
        text-align:center;
    }

    #explain h1{
        text-decoration:underline;
        text-decoration-color:#FED700;
    }

    #explain p{
        margin-top:30px;
        margin-bottom:60px;
    }

    #question_area{
        width:730px;
        margin:auto;
    }

    #question_area p{
        font-size:19px;
    }

    #question_item1{
        border-bottom:1.5px dotted black;
    }

    .question_number{
        background-color:#FED700;
        display:inline-block;
        border-radius:50%;
        width:27px;
        height:27px;
        text-align:center;
        line-height:27px;
        border:solid 1px black;
    }

    .question_item_question{
        width:630px;
        margin:auto;
        margin-bottom:30px;
    }

    .question_item_question_label {
        display: block;
        line-height:2.5;
    }
      
    input[type="radio"] {
        display: none;
    }

    .question_item_question_text{
        color:#383737;
    }
      
    .question_item_question_text:before {
        content:"";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 20px;
        border-width: 1px;
        border-style: solid;
        border-radius: 50%;
        padding: 3px;
        background-clip: content-box;
        position:relative;
        top:5.5px;
    }

    #question_item2{
        border-bottom:1.5px dotted black;
        margin-bottom:150px;
    }
      
    input[type="radio"]:not(:checked) + .question_item_question_text:before {
        border-color: #383737;
    }
      
    input[type="radio"]:checked + .question_item_question_text:before {
        border-color:#383737;
        background-color: #FED700;
    }

    .shindan_result_area{
        display:none;
        width:730px;
        margin:auto;
        margin-bottom:120px;
        text-align:center;
        border:solid 4px #FED700;
        border-radius: 2px;
        position:relative;
        padding: 15px;
    }
    
    .shindan_result_area.active{
        display:block;
    }

    #shindan_result_area_title{
        font-size:25px;
        background-color:#FED700;
        width:30%;
        margin:auto;
        border-radius:50px;
        position:absolute;
        transform: translate(-50%,-50%);
        left:50%;
        top:0%;
        line-height:45px;
    }

    #shindan_result_area_result{
        margin-top:35px;
    }

    .shindan_result_a{
        display:none;
    }
    
    .shindan_result_a.active{
        display:block;
        text-decoration:none;
        color:black;
        font-size:16px;
        line-height:40px;
    }

    .shindan_result_area_detail{
        margin:auto;
        width:140px;
        height:40px;
        background-color:#FED700;
        border-radius:50px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shindan_result_title{
        color:#FED700;
        font-size:30px;
    }

    #shindan_result_reason{
        display:flex;
        justify-content:space-between
    }

    #shindan_result_reason_character{
        width:10%;
        margin-left:15px;
        position:relative;
    }

    #shindan_result_reason_character img{
        height:200px;
        position:absolute;
        bottom:8%;
        left:0;
    }

    .shindan_result_reason_text{
        width:85%;
        margin-right:15px;
        margin-bottom:15px;
        text-align:left;
        font-size:13px;
    }

    #question_item2 .question_item_question{
        display:none;
    }

    #question_item2 .question_item_question.active{
        display:block;
    }

    .shindan_result_title{
        display:none;
    }

    .shindan_result_title.active{
        display:block;
    }

    .shindan_result_reason_text{
        display:none;
    }

    .shindan_result_reason_text.active{
        display:block;
    }


@media screen and (max-width:870px){
    body {
        margin:0;
        padding:0;
        font-size:13px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight:600;
        line-height:1.8;
    }

    #header{
        position:relative;
        background-image:url("../images/bg_page_top_yellow_sp.jpg");
        background-repeat: no-repeat;
        background-size:100% 336px;
        width:100%;
        height:336px;
        margin:auto;
    }

    #logo_original{
        height:60px;
        position:absolute;
        top:13%;
        left:5%;
    }

    #header_navi{
        display:none;
    }

    #header_navi_smp ul{
        list-style:none;
        padding:0;
        margin:0 auto;
        padding-top:80px;
        height:700px;
    }
    
    #header_navi_smp li{
        height:90px;
        margin:0 auto;
        line-height:45px;
        text-align:center;
    }
    
    #header_navi_smp a{
        font-size:18px;
        text-decoration:none;
        color:black;
    }
    
    #header_navi_smp_shindan{
        border-radius:50px;
        display:inline-block;
        background-color:white;
        width:120px;
        height:50px;
    }

    #diagnose{
        position:absolute;
        top:60%;
        left:50%;
        transform: translate(-50%,-50%);
        color:white;
        font-size:45px;
        font-family: 'Helvetica Neue',sans-serif;
    }

    #header_shindan{
        position:absolute;
        top:90%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:25px;
    }

    #diagnose_man1{
        display:none;
    }

    #wrapper{
        width:350px;
        margin:auto;
    }

    #explain{
        width:auto;
        margin:auto;
        text-align:center;
    }

    #explain h1{
        text-decoration:underline;
        text-decoration-color:#FED700;
        font-size:20px;
    }

    #explain p{
        margin-top:30px;
        margin-bottom:60px;
        text-align:left;
    }

    #question_area{
        width:auto;
        margin:auto;
    }

    #question_area p{
        font-size:19px;
    }

    #question_item1{
        border-bottom:1.5px dotted black;
    }

    .question_number{
        background-color:#FED700;
        display:inline-block;
        border-radius:50%;
        width:27px;
        height:27px;
        text-align:center;
        line-height:27px;
        border:solid 1px black;
    }

    .question_item_question{
        width:auto;
        margin:auto;
        margin-bottom:30px;
    }

    .question_item_question_label{
        display: flex;
        flex-direction: row;
        line-height:2.5;
        margin-bottom:20px;
    }

    input[type="radio"] {
        display: none;
    }

    .question_item_question_text{
        color:#383737;
    }
      
    .question_item_question_text:before {
        content:"";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 20px;
        border-width: 1px;
        border-style: solid;
        border-radius: 50%;
        padding: 3px;
        background-clip: content-box;
        position:relative;
        top:5.5px;
    }

    #question_item2{
        border-bottom:1.5px dotted black;
        margin-bottom:150px;
    }
      
    input[type="radio"]:not(:checked) + .question_item_question_text:before {
        border-color: #383737;
    }
      
    input[type="radio"]:checked + .question_item_question_text:before {
        border-color:#383737;
        background-color: #FED700;
    }

    .shindan_result_area{
        width: 90%;
        display:none;
        margin:auto;
        margin-bottom:70px;
        text-align:center;
        border:solid 4px #FED700;
        border-radius: 2px;
        position:relative;
        padding: 15px;
    }
    
    .shindan_result_area.active{
        display:block;
    }

    #shindan_result_area_title{
        font-size:20px;
        background-color:#FED700;
        width:50%;
        height:40px;
        margin:auto;
        border-radius:50px;
        position:absolute;
        transform: translate(-50%,-50%);
        left:50%;
        top:0%;
        line-height:40px;
    }

    #shindan_result_area_result{
        margin-top:10px;
    }

    .shindan_result_a{
        display:none;
    }
    
    .shindan_result_a.active{
        display:block;
        text-decoration:none;
        color:black;
        font-size:14px;
        line-height:35px;
    }

    .shindan_result_area_detail{
        margin:auto;
        width:140px;
        height:35px;
        background-color:#FED700;
        border-radius:50px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shindan_result_title{
        color:#FED700;
        font-size:20px;
    }

    #shindan_result_reason{
        display:block;
    }

    #shindan_result_reason_character{
        display:none;
    }

    .shindan_result_reason_text{
        width: 90%;
        margin: 5px auto 15px;
        text-align:left;
        font-size:13px;
    }

    #question_item2 .question_item_question{
        display:none;
    }

    #question_item2 .question_item_question.active{
        display:block;
    }

    .shindan_result_title{
        display:none;
    }

    .shindan_result_title.active{
        display:block;
    }

    .shindan_result_reason_text{
        display:none;
    }

    .shindan_result_reason_text.active{
        display:block;
    }

}