@charset "UTF-8";
/* CSS Document */
/* 基本-モバイルファースト ======================================================================================================== */

#conditions{
background-color: #eee;
padding: 5vw;
}

form .cap{
text-align: right;
}
form dt{
font-weight: bold;
margin-bottom: 5px;
}
form dd{
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: solid 1px #ddd;
}
form dd:last-child{
padding-bottom: 0px;
margin-bottom: 0px;
border-bottom: none;
}
#conditions dd input[type="text"]{
width: calc(100% - 3em);
text-align: right;
}

#conditions dd .select{
display: inline-block;
vertical-align: middle;
width: calc(100% - 3em);
position: relative;
}
#conditions dd .select::after{
content: "▼";
display: block;
font-size: 10px;
color: #111;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin: auto 0;
}
#conditions dd select{
-webkit-appearance: none;
text-decoration: none;
border: solid 1px #AAA;
display: inline-block;
width: 100%;
cursor: pointer;
padding: 5px;
font-size: 14px;
}

form .btnArea{
text-align: center;
margin-top: 20px;
}
form .btnArea input{
display: inline-block;
-webkit-appearance: none;
text-decoration: none;
border: none;
font-size: 18px;
width: 45%;
padding: 20px 0;
margin: 0 2%;
border-radius: 5px;
}
form .btnArea input[type="button"]{
background-color: #b3203a;
color: #fff;
}
form .btnArea input[type="reset"]{
background-color: #aaa;
color: #fff;
}


#result{
background-color: #f7e8eb;
padding: 5vw;
margin-top: 40px;
}
#result dt{
font-size: 18px;
color: #b3203a;
text-align: center;
}
#result dd{
font-size: 30px;
text-align: center;
}
#result dd input[type="text"]{
font-size: 30px;
color: #111;
width: 4em;
padding: 0;
border: none;
background-color: transparent;
text-align: right;
}
#result .common_btn{
display: none;
}
#result .common_btn a{
background-color: #fff;
}

/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){


#container > .contents_size{
text-align: center;
}
#container .description{
display: inline-block;
text-align: left;
}


form dd{
padding-bottom: 20px;
margin-bottom: 20px;
}


#conditions{
width: 80%;
padding: 4vw;
margin-right: auto;
margin-left: auto;
}
#conditions dl{
display: flex;
flex-wrap: wrap;
text-align: left;
font-size: 20px;
}
#conditions dt{
width: 11em;
text-align: right;
padding-right: 1em;
padding-bottom: 0px;
margin-bottom: 30px;
border-bottom: none;
}
#conditions dd{
width: calc((100% - 22em)/2);
border-bottom: none;
padding-bottom: 0px;
margin-bottom: 30px;
padding-right: 2em;
}
#conditions dt:first-child + dd{
width: calc(100% - 11em);
}
#conditions dd input[type="text"]{
font-size: 20px;
}




#result{
width: 80%;
padding: 4vw;
margin-right: auto;
margin-left: auto;
}

#result dd{
font-size: 40px;
}
#result dd input[type="text"]{
font-size: 40px;
}

#result .common_btn a{
margin-top: 20px;
}
#result .common_btn a:hover{
background-color: #b3203a;
color: #fff;
}



}