@charset "utf-8";
/* CSS Document */
/* ここにCSSを記述 */
/* ----------------------------------------
PC
------------------------------------------- */
body {
font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
background: #116bad url(../../img/body_bg.jpg) repeat center center scroll;
font-size: 18px;
font-weight: 800;
color: #08315c;
letter-spacing: 2px;
line-height: 2.0;
word-wrap: break-word;
height: 100%;
margin: 0;
padding: 0;
}

main.rf-container{
background: #fff;
width: 1100px;
margin: 3em auto;
padding:1em 3em;
border-radius: 20px;
}

h1.title_logo{
margin:15px auto;
}
h1.title_logo img{
width: 220px;
max-width: 90%;
margin: 0px auto 0px;
display: block;
}

.flexbox {
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
align-content: space-around;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
}
.flexbox h2.section-title {
margin: 1%;
width: 22%;
padding: 0.6em 1em;
background: #ccc;
color: #fff;
text-align: center;
border-radius: 5px;
font-size: 100%;
line-height: 1.6;
letter-spacing: 0;
}
.flexbox h2.act{
background: #004a85;
}
.flexbox h2.section-title .small{
font-size: 90%;
display: block;
}
h3.set-title{
background: #d7e0ef;
border-left: #2b4a80 10px solid;
padding: 10px;
padding-left: 1em;
line-height: 1.8;	
}
.score-trace .grand-total{
font-size: 130% !important;
}

/*装飾*/
.label-note,
.field-error{
color: #cc0000;
font-size: 80%;
}
.help-text{
color: #cccccc;
font-size: 80%;
}
.rf-errors{
color: #cc0000;
}

/*form*/
.form-group{
display: flex;
flex-direction: row;
align-items: center;
align-content: space-around;
justify-content: flex-start;
flex-wrap: wrap;
margin: 2em 0;
border-left: #2b4a80 10px solid;
padding-left: 1.2em;
}
.form-group .nested {
border: none;
margin: 0;
}

/*.form-group:before {
content: "■";
font-family: FontAwesome;
margin-right: 1.2em;
}*/

.form-label{
margin-right: 2em;
width: auto;
min-width: 300px;
letter-spacing: 0;
/*border-left: #2b4a80 5px solid;
padding-left: 1em;*/
}

/*input*/
button, input, select, textarea {
font-family : inherit;
font-size: initial;
padding: 5px 10px;
margin: 10px;
}

textarea{
width: 340px;
max-width: 80%;
}

input[type="submit"],
input[type="reset"]{
width: fit-content;
min-width: 130px;
background: #001c58;
border: #001c58 1px solid;
color: #fff;
padding: 1em;
transition: opacity .6s;
cursor: pointer;
margin: 1em;
display: block;
border-radius: 80px;
box-shadow: #ccc 5px 5px 5px;
text-align: center;
}

input[type="reset"]{
color: #001c58;
background: #ccc;
}

/*button*/
button{
width: fit-content;
min-width: 200px;
background: #ccc;
border: #001c58 1px solid;
color: #001c58;
padding: 1em 2em;
transition: opacity .6s;
cursor: pointer;
margin: 2em auto;
display: block;
border-radius: 80px;
box-shadow: #ccc 5px 5px 5px;
text-align: center;
}
button[type="submit"]{
background: #001c58;
border: #001c58 1px solid;
color: #fff;
}

/*個人情報の取り扱いについて*/
.pp_box{
border: #394a7c 1px solid;
padding: 10px 15px;
margin: 10px;
font-size: 90%;
overflow: overlay;
width: 90%;
height: 100px;
}

/*結果*/
.result-title{
background: #f7851e;
color: #fff;
text-align: center;
margin:0em auto 1em;
padding: 15px;
width: 510px;
max-width: 100%;
font-size: 150%;
font-weight: bold;
border-radius: 10px;
}
.result-subtitle{
font-size: 100%;
font-weight: bold;
text-align: center;
}
.result-txt{
margin: 0em auto 3em ;
text-align: center;
}
.result-pickup{
    /*margin: 0em auto 1.5em;*/
    text-align: center;
    font-size: 150%;
    font-weight: 900;
    background: linear-gradient(transparent 0%, #FFEB3B 0%);
    width: fit-content;
    padding: 10px;
	    display: inline;
}

/*footer*/
footer{
font-size: 15px;
padding: 15px;
margin: 0 auto;
display: block;
width: fit-content;
}
address {
font-size: 15px;
color: #fff;
font-style: normal;
padding: 2em 0;
text-align: center;
letter-spacing: 1px;
font-weight: normal;
}
/* ----------------------------------------
タブレット
------------------------------------------- */
@media screen and (max-width:1024px) {
main,main.rf-container {
background: #fff;
width: auto;
margin: 10px;
padding: 10px;
border-radius: 20px;
}
h1.title_logo img{
width: 180px;
}
.result-title{
font-size: 120%;
}
}

/* ----------------------------------------
スマホ
------------------------------------------- */
@media screen and (max-width:590px) {
.flexbox {
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: space-around;
flex-direction: row;
justify-content: center;
align-items: stretch;
}
.flexbox h2.section-title {
margin: 1%;
width: 38%;
padding: 10px 15px;
background: #ccc;
color: #fff;
text-align: center;
border-radius: 5px;
font-size: 90%;
line-height: 1.6;
letter-spacing: 0;
}
.flexbox h2.act{
background: #004a85;
}
}