@charset "UTF-8";
html {
    min-height: 100%;
}
body {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  font-size: 16px;
	margin: 0;
	padding: 0;
	color: #333;
    background: linear-gradient(to bottom,white,rgb(157, 240, 255));
	/* background-color:rgba(8,203,242,0.4); */
}


/* トップページ */
.title {
    text-align: center;
}
.title img {
    margin: 10px 10px;
    width: 589px;
    height: 107.5px;
    border-radius: 30px;
}

.name {
    text-align: center;
    margin: 20px;
}
.your_name {
    font-size: 30px;
}
.input_name {
    border:0;
    padding:10px;
    font-size:1.3em;
    color:#aaa;
    border:solid 1px #ccc;
    margin:0 0 20px;
    width:300px;
    border-radius: 10px;
}

.age_box {
    display: block;
    text-align: center;
}
.age_box input[type="radio"] {
    width         : 22px;        
    height        : 22px;      
    vertical-align: top;         
    display       : none;
}
.age_box input[type="radio"] + label{
    padding       : 0 4px;                      
    font-size     : 25px;                       
    font-weight   : bold;                       
    border        : 2px solid rgb(100, 198, 255); 
    border-radius : 5px;  
    margin: 10px;                      
    background    : #ffffff;                    
    cursor        : pointer;                    
    transition    : .2s;                        
}
.age_box input[type="radio"]:checked + label {
    background    : #cfdcff;
}
.age_box input[type="radio"]:not(:checked) + label:hover {
    background    : rgba(74, 86, 255, 0.4);
}
.age {
    font-size: 30px;
}

.go {
    text-align: center;
    margin: 20px;
}
.input_go {
    border:solid 1px #666;
    padding:15px 30px;
    margin:0 0 20px;
    font-size:1.2em;
    text-transform:uppercase;
    font-weight:bold;
    color:#333;
    background-color: azure;
    border-radius: 20px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    cursor:pointer;
}


.load-fade {opacity : 0; transition : all 5s/*処理にかかる時間*/;}
.load-fade.done{opacity : 1; transform : translate(0, 0);}


/* 質問ページ */
.box {
    display: block;
    text-align: center;
    margin: 20px;
}
.question {
    font-size: 30px;
}
.box input[type="radio"] {
    width         : 22px;        
    height        : 22px;      
    vertical-align: top;         
    display       : none;
}
.box input[type="radio"] + label{
    padding       : 0 4px;                      
    font-size     : 25px;                       
    font-weight   : bold;                       
    border        : 2px solid blue; 
    border-radius : 5px;  
    margin: 10px;                      
    background    : #ffffff;                    
    cursor        : pointer;                    
    transition    : .2s;                        
}
.box input[type="radio"]:checked + label {
    background    : #cfdcff;
}
.box input[type="radio"]:not(:checked) + label:hover {
    background    : rgba(74, 86, 255, 0.4);
}

/* 結果ページ */
.result {
    text-align: center;
}
.result img {
    width: 600px;
    height: 600px;
    border-radius: 10px;
}
.result p {
    font-size: 20px;
}
.result h2 {
    font-size: 30px;
    color: rgb(10, 70, 199);
    margin-top: 10px;
    margin-bottom: 10px;
}
.answer {
    margin: 50px 100px;
    text-align: center;
    padding-left:20px;
    padding-right: 20px;
    border: 1px solid rgba(0, 112, 6, 0.726);
    border-radius: 5px;
}
.answer h3 {
    font-size: 25px;
    color: rgba(0, 112, 6, 0.726);
}
.answer li {
    list-style: none;
    font-size: 20px;
    line-height: 25px;
}