@charset "UTF-8";
/*各ページ独自のcss設定*/
/*以下に指定を記述する*/


.psy-holder{
    background-image: url(../img/psy_watertank.svg);
    width: 46%;
    text-align: center;
    font-size: 300%;
    margin-bottom: 20%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 12%;
    padding-left: 26%;
    padding-right: 28%;
    padding-bottom: 16%;
   
}


.explain{
   margin-bottom: 5%;
   margin-right: auto;
   margin-left: auto;
   width: 77%;
   display: block;
}

.start{
   background-color: #5a5574;
   width: 50%;
   padding: 2% 6% 2% 6%;
   position: absolute;
   margin-top: -16%;
   margin-bottom: 4%;
   margin-right: auto;
   margin-left: 17%;
   font-size: 36px;
   border: 20px solid #8d5537;
   outline: 3px solid #ffffff;
   color: #ffffff;
   text-align: center;
   border-radius: 10px;
}



.yes{
   background-color: #5a5574;
   width: 25%;
   padding: 1% 4% 1% 4%;
   position: absolute;
   margin: -16% 55% 0% 10%;
   font-size: 36px;
   border: 10px solid #df1b4a;
   outline: 3px solid #ffffff;
   color: #ffffff;
   border-radius: 10px;
}
.no{
   background-color: #5a5574;
   width: 25%;
   padding: 1% 4% 1% 4%;
   margin: -16% 10% 0% 55%;
   font-size: 36px;
   border: 10px solid #25469b;
   outline: 3px solid #ffffff;
   color: #ffffff;
   position: absolute;
   border-radius: 10px;

}

.btn{
   text-align: center;
   text-decoration: none;
}


.answer{
   background-color: #eebc61;
   margin-left: 15%;
   margin-right: 15%;
   margin-top: 200px;
   text-align: center;
   padding: 58px;
   border-radius: 50px;
   border-color: #f39800;
   border-width: 33px;
   border-style: solid;
   margin-bottom: 22%;
}

.result{
   font-size: 56px;
}

.detail{
   font-size: 29px;
}

#q01,#q02,#q03,#q04,#q05,#q06,#q07,#q08,#q09,#q10,#q11,#q12,#q13,#q14,#q15,#q16,#q17,#q18,#q19,#q20,#q21,#q22,#q23,#q24,#q25{
   display: none;
}

.fit{
   display: block;
}

a:hover{
   transform: scale(1.05, 1.05);
   transition: 0.8s;
}

main{
   padding-bottom: 14vh;
}

@media screen and (min-width:1024px) {
    /*レスポンシブ用*/


.psy-holder{
    background-image: url(../img/psy_watertank.svg);
    width: calc(410px*0.8);
    height: calc(300px*0.8);
    line-height: 185%;
    text-align: center;
    font-size: 200%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 5%;
    padding-left: 11%;
    padding-right: 11%;
    padding-bottom: 11%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0%;
    vertical-align: middle;
}

.sentence{
   margin-top: 3vw;
}

.start{
   background-color: #5a5574;
   width: 17%;
   padding: 0% 6% 0% 6%;
   position: relative;
   margin-top: 0;
   margin-bottom: 0;
   margin-right: auto;
   margin-left: auto;
   font-size: 36px;
   border: 10px solid #8d5537;
   outline: 3px solid #ffffff;
   color: #ffffff;
   text-align: center;
   display: block;
   border-radius: 10px;
}

.yes{
   background-color: #5a5574;
   width: 25%;
   padding: 1% 4% 1% 4%;
   font-size: 36px;
   /*margin: -16% 55% 0% 10%;*/
   border: 10px solid #df1b4a;
   outline: 3px solid #ffffff;
   color: #ffffff;
   position: relative;
   display: block;
   margin: 0 auto;
   border-radius: 10px;
}

.no{
   background-color: #5a5574;
   width: 25%;
   padding: 1% 4% 1% 4%;
   /*margin: -16% 10% 0% 55%;*/
   font-size: 36px;
   border: 10px solid #25469b;
   outline: 3px solid #ffffff;
   color: #ffffff;
   position: relative;
   display: block;
   margin: 0 auto;
   border-radius: 10px;
}

.option{
   display: flex;
}

.answer{
   margin-bottom: 6%;
    }

.explain{
   width: 45%;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 5%;
   display: block;
}
}