@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

    body {
        margin:0;
        padding:0;
        font-size:15px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight:600;
        line-height:1.8;
    }

    #header{
        position:relative;
        background-image:url("../images/bg_page_top_yellow_pc.jpg");
        background-repeat: no-repeat;
        background-size:100% 336px;
        width:100%;
        height:336px;
        margin:auto;
    }

    #logo_original{
        height:70px;
        position:absolute;
        top:10%;
        left:3%;
    }

    #header_navi{
        position:absolute;
        top:20%;
        left:50%;
        transform: translate(-50%,-50%);
        width:620px;
        height:70px;
        text-align:center;
        background-color:white;
        border-radius:50px;
        line-height:70px;
        box-shadow: 0px 0px 5px 0px rgb(186, 182, 182);
    }

    #header_navi ul{
        /* list-style:none; */
        padding:0;
        margin:0 auto;
        height:70px;
    }

    #header_navi li{
        display:inline;
        height:50px;
        margin:0 27px;
        display:inline-block;
        border-radius:50px;
        width:15%;
        line-height:50px;
    }

    #header_navi li#shindan{
        background-color:#FED700;
    }
    
    #header_navi a{
        color:black;
        text-decoration:none;
    }

    #contact{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        color:white;
        font-size:72px;
        font-family: 'Helvetica Neue',sans-serif;
    }

    #header_otoiawase{
        position:absolute;
        top:87%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:22px;
    }

    #explain{
        text-align:center;
        margin-top:80px;
    }

    #otoiawase_area{
        width:796px;
        height:525px;
        margin:40px auto;
        text-align:center;
    }

    #otoiawase_area table{
        width:796px;
        height:525px;
        margin:auto;
        text-align:center;
    }

    #otoiawase_midashi{
        width:20%;
        background-color:#FED700;
    }

    #otoiawase_midashi_mail_smp{
        display:none;
    }

    #otoiawase_midashi_otoiawase_smp{
        display:none;
    }

    #otoiawase_naiyo{
        background-color:#F5F7FA;
    }

    .otoiawase_naiyo_text{
        height:45%;
        margin:20px;
        text-align:left;
    }

    #otoiawase_naiyo_area{
        height:40%;
    }

    #otoiawase_naiyo_textarea{
        height:60%;
        margin:20px;
        text-align:left;
    }

    .input_area{
        width:80%;
        height:100%;
    }

    #soushin_area{
        margin:auto;
        margin-bottom:100px;
        width:150px;
        height:40px;
    }
    
    #soushin_area input{
        width:150px;
        height:40px;
        background-color:#FED700;
        border-radius:50px;
        border-color:#FED700;
        box-shadow: 0px 0px 5px 0px rgb(186 182 182);
        font-size:16px;
        line-height:37px;
    }



@media screen and (max-width:870px){
    body {
        margin:0;
        padding:0;
        font-size:13px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight:600;
        line-height:1.8;
    }

    #header{
        position:relative;
        background-image:url("../images/bg_page_top_yellow_sp.jpg");
        background-repeat: no-repeat;
        background-size:100% 336px;
        width:100%;
        height:336px;
        margin:auto;
    }

    #logo_original{
        height:60px;
        position:absolute;
        top:13%;
        left:5%;
    }

    #header_navi{
        display:none;
    }

    #header_navi_smp ul{
        list-style:none;
        padding:0;
        margin:0 auto;
        padding-top:80px;
        height:700px;
    }
    
    #header_navi_smp li{
        height:90px;
        margin:0 auto;
        line-height:45px;
        text-align:center;
    }
    
    #header_navi_smp a{
        font-size:18px;
        text-decoration:none;
        color:black;
    }
    
    #header_navi_smp_shindan{
        border-radius:50px;
        display:inline-block;
        background-color:white;
        width:120px;
        height:50px;
    }


    #contact{
        position:absolute;
        top:60%;
        left:50%;
        transform: translate(-50%,-50%);
        color:white;
        font-size:45px;
        font-family: 'Helvetica Neue',sans-serif;
    }

    #header_otoiawase{
        position:absolute;
        top:90%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:25px;
    }

    #explain{
        text-align:center;
        margin-top:80px;
    }

    #otoiawase_area{
        width:350px;
        height:525px;
        margin:40px auto;
        text-align:center;
    }

    #otoiawase_area table{
        width:350px;
        height:525px;
        margin:auto;
        text-align:center;
    }

    #otoiawase_midashi{
        width:25%;
        background-color:#FED700;
    }
    #otoiawase_midashi_mail_smp{
        display:block;
    }

    #otoiawase_midashi_mail_pc{
        display:none;
    }

    #otoiawase_midashi_otoiawase_pc{
        display:none;
    }
    #otoiawase_midashi_otoiawase_smp{
        display: block;
    }

    #otoiawase_naiyo{
        background-color:#F5F7FA;
    }

    .otoiawase_naiyo_text{
        height:50%;
        margin:20px;
        text-align:left;
    }

    #otoiawase_naiyo_area{
        height:40%;
    }

    #otoiawase_naiyo_textarea{
        height:80%;
        margin:20px;
        text-align:left;
    }

    .input_area{
        width:100%;
        height:100%;
    }

    #soushin_area{
        margin:auto;
        margin-bottom:60px;
        width:150px;
        height:40px;
    }
    
    #soushin_area input{
        width:150px;
        height:40px;
        background-color:#FED700;
        border-radius:50px;
        border-color:#FED700;
        box-shadow: 0px 0px 5px 0px rgb(186 182 182);
        font-size:16px;
        line-height:37px;
    }

}