/*　for smartphone & ALL　*/
#form_massageArea{
  display: grid;
  grid-column: 1;
  grid-row: 1/5;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.7);
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  display: none;
}
#massage_set{
    display: grid;
    grid-template-columns: auto 60px;
    grid-template-rows: auto;
    position: fixed;
    top:10vh;
    width: 80vw;
    height: auto;
    padding: 24px;
    background-color: rgba(46, 115, 180, 0.839);
    color: white;
    border-radius: 5px;
    margin-left: calc((100% - 80vw)/2);
}
#massage_set:hover{
    cursor: pointer;
}
#massage_set div:nth-child(1){
    grid-column: 1;
    grid-row: 1;
}
#massage_set div:nth-child(2){
    grid-column: 2;
    grid-row: 1;
}
#massage_set div:nth-child(3){
    grid-column: 1 / 3;
    grid-row: 2;
}

#aozora_form span{
    color: #c00;
    font-size: 0.8em;
}


.button_set{
    text-align: center;
}

.inputtext{
    font-size: 1.1em;
}
.my_text{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.5em;
}
#name,#tel,#mail,#massage,#postnum,#address1,#address2{
    height: auto;
    padding: 10px;
    border-radius: 5px;
    border: solid thin #999;
    }
    #name,#tel,#mail{width: 100%;}
    #massage{width: 100%;height: 200px;}
    #postnum{width: 150px;}
    #address1,#address2{width: 100%;}

    form p{
        margin-bottom: 0px;
    }
    form input{
        margin-bottom: 20px;
    }
    form h3{
        font-size: 1.4em;
        margin-top: 30px;
    }
    #submit,#reset{
        width: 100px;
        height: 50px;
        margin: 20px 15px 0px 15px;
        font-size: 1em;
        border: solid thin #999;
        border-radius: 5px;
    }
    #submit{
        background-color:#0088E3;
        color: white;
    }
    #submit:hover{
       background-color: #0066cc;
       cursor: pointer;
    }
    #reset{
        background-color:#666;
        color: white;
    }
    #reset:hover{
        background-color: #555;
        cursor: pointer;
     }


/* for pad-------------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1099px) {

        #name,#tel{width: 400px;}
        #mail{width: 600px;}
        #massage{width: 100%;height: 200px;}
        #postnum{width: 150px;}
        #address1,#address{width: 100%;}

}
/*　for PC-------------------------------------------------------------------------------------------　*/
@media screen and (min-width:1100px) {

    #massage_set{
        display: grid;
        grid-template-columns: auto 60px;
        grid-template-rows: auto;
        position: fixed;
        top:calc(( 100vh - 150px ) / 3);
        width: 600px;
        height: auto;
        color: white;
        padding: 30px;
        margin-left: calc((100% - 600px)/2);
    }

        #name,#tel{width: 400px;}
        #mail{width: 600px;}
        #massage{width: 100%;height: 200px;}
        #postnum{width: 150px;}
        #address1,#address{width: 100%;}


}