@charset "utf-8";
#content_back{
    background-color:gray;
}
#content_area{
    box-sizing:border-box;
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    border:solid 1px black;
    background-color:white;    
}
#head{
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
}
#head #headLogo{
    position: relative;
    width:150px;
    height:120px;
    margin-right:20px;
}
#head #headLogo #head_img_1{
    position:absolute;
    top:0px;
    width:120px;
}
#head #headLogo #head_img_2{
    position:absolute;
    bottom:-5px;
    width:150px;
}
#head #headLogo img{
    width:100%;
}
#head #form_title{
    margin-top:50px;
    font-size:1.2rem;
    margin-right:20px;
}
#head #progress{
    display: flex;
    flex-direction: row;
}
#prog_1,#prog_2,#prog_3{
    box-sizing:border-box;
    width:120px;
    height:80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border:solid black 1px;
    background-color:white;
    margin-right:20px;
    
}
#prog_1{
    background-color:aqua;
}
#read{
    box-sizing:border-box;
    padding:10px;
    border:solid black 1px;
    margin-bottom:20px;
}
#read h2{
    font-weight:bold;
    font-size:1.1em;
    line-height: 1.1em;
}
#trial_space{
    display:flex;
    flex-direction:row;
    border-top:1px dotted black;
}
#trial_string{
    width:120px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
}
#trial_string p{
    font-size:0.8em;
    text-align: center;
}

#trial_img{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    width:400px;
    margin-left:10px;
}
.trial_link_img{
    display:block;
    width:120px;
}
.trial_link_img img{
    width:100%;
}
#postage{
    display:flex;
    flex-direction: row;
    border-top:1px dotted black;
}
#postage h2{
    width:120px;
    display:flex;
    justify-content: center;
}
#postage table td{
    padding-left:10px;
}
#inputTable{
    border:solid 1px gray;
    border-collapse: collapse;
    margin-bottom:20px;
}
#inputTable th,#inputTable td{
    border:solid 1px gray;
    height:40px;
    text-align: center;
}
#inputTable .bookName{
    width:230px;
}
#inputTable .under29,#inputTable .over30{
    width:100px;
}
#inputTable .numOfBook{
    width:80px;
}
#inputTable .numOfBook input{
    width:40px;
    margin-left:10px;
}
#inputTable .tableGray{
    background-color:lightgray;
}
.inputRow,.confirmRow{
    display: flex;
    flex-direction: row;
    align-items: center;
    height:40px;
    padding:0;
    border:1px solid gray;
    margin-bottom: -1px;
}
.inputRow label,.inputRow input,.inputRow p{
    height:20px;
}
.inputRow label{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing:border-box;
    width:200px;
    height:40px;
    background-color:lightgray;
    margin-right:20px;
    border-right:dotted 1px white;
    border-collapse: collapse;
}
.inputRow #zip{
    width:80px;
}
.inputRow #address{
    width:350px;
}
#inputRow_option,#confirmRow_option{
    display: flex;
    flex-direction: row;
    align-items: center;
    height:120px;
    padding:0;
    border:1px solid gray;
}
#inputRow_option label{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing:border-box;
    width:200px;
    height:120px;
    background-color:lightgray;
    margin-right:20px;
    border-right:dotted 1px white;
    border-collapse: collapse;
}
#inputRow_option textarea{
    width:350px;
    height:100px;
}
#caution{
    color:red;
}
#confirm_area{
    display:none;
}
.confirmRow{
    height:40px;
}
.confirmRow .confirm_index{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width:200px;
    height:40px;
    margin-right:20px;
    background-color:lightgray;
}
#confirmRow_option .confirm_index{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;  
    box-sizing: border-box;
    width:200px;
    height:120px;
    margin-right:20px;
    background-color:lightgray;  
}
#confirmTable{
    border:solid gray 1px;
    border-collapse: collapse;
    margin-top:20px;
    margin-bottom:20px;
}
#confirmTable td,#confirmTable th{
    border:solid gray 1px;
    text-align: center;
    height:40px;
}
#confirmTable th{
    background-color:lightgray;
    font-weight:normal;
}
#confirmTable .confirmT_left{
    width:250px;
}
#confirmTable .confirmT_middle{
    width:100px;
}
#confirmTable .confirmT_right{
    width:100px;
}
#confirmTable #confirmT_Span{
    height:5px;
}
.buttonArea{
    margin-top:20px;
    display:flex;
    flex-direction: row;
}
.buttonArea button{
    width:120px;
    height:60px;
    margin-right:20px;
}