html{
    font-size:100%;
}
body{
    color:#24292e;
    font-family:"Sawarabi gothic" ;
}
a{
    text-decoration:none;
}
p{
    font-size:1.3rem;
}
img{
    max-width: 100%;
}
li{
    list-style: none;
    font-size: 1.2rem;
}

.menuBar{
    background-color:#5599c7;
    text-align:center;
}

.menuBar ul li{
    display: inline-block;
    width:140px;
    margin:0 ;
    padding-top: 20px;
    padding-bottom: 15px;
    cursor:pointer;
    transition:all 0.2s;
}

.menuBar ul li a{
    text-decoration:none;
    color:white;
    font-weight:100;
    font-size: 16px;
}

.active,
.menuBar ul li:hover{
    background-color:#73b5e0;
}

.subMenu-1{
    position: absolute;
    background-color:#5599c7;
    margin-top:0px;
    padding-top:20px;
    padding-bottom: 15px;
    display:none;
}

.menuBar ul li:hover .subMenu-1 {
    display:block;
}

.menuBar ul li:hover .subMenu-1 ul li{
    display:block;
    width:140px;
    border-bottom:1px dotted white;
}

.menuBar ul li:hover .subMenu-1 ul li:last-child{
    border: none;
}

.wrapper{
    max-width: 960px;
    margin: 0 auto 130px auto;
    font-size:0.9rem;
    padding: 0 4%;
}


.top p{
    font-size: 3rem;
     color:#fff; 
     text-align:center; 
     padding: 10px;
     background:linear-gradient(to right,cornflowerblue, 70%, white);
   
  }
 

  .menu{
    margin: 0;
   
}
.menu2{
    background: #5599c7;/*背景色*/
    margin: 0;
    padding-bottom:1rem ;
    padding-top: 2rem;
   color:#fff;
  
}



.menu3{
    margin-bottom: 0;
  
  
}

.menu3 a{
    color:#fff;
    padding-left: 10px;
    padding-right:10px ;
    
}

.child {
    width:fit-content;
    color:#5599c7;
    margin: 0 auto;
  }

 
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"M PLUS Rounded 1c",sans-serif;
    }
    
  #al{
   margin-top: 50px;
   margin-bottom: 100px;

  }  
    .contact-form{
    border:1.5px solid #aaa;
    padding:10px;
    }
    
    .title{
    text-align:center;
    font-size:20px;
    margin-bottom:20px;
    font-weight:bold;
    }
    
    form{
    width:460px;
    margin:0 auto;
    margin-bottom: 70px;
    }
    
    .item{
    overflow:hidden;
    margin-bottom:20px;
    padding-left: 20px;
    }
    
    .label{
    float:left;
    margin-right:0;
    width:135px;
    border-left:3px solid #c270c2;
    padding-left:3px;
    }
    
    inputs{
    float:left;
    width:300px;
    }
    
    input[type="text"],
    input[type="email"]{
    border:solid 1px #aaa;
    padding:10px;
    font-size:15px;
    border-radius:5px;
    }
    
    textarea{
    border:1px solid #aaa;
    border-radius:5px;
    padding:10px;
    height:160px;
    width:350px;
    font-size:15px;
    }
    
    .button-area{
    text-align:center;
    }
    
    input[type="submit"]{
    background-color:#c2704f;
    border:none;
    padding:10px ;
    color:white;
    font-size:17px;
    font-weight:bold;
    border-radius:5px;
    margin:0 5px;
    box-shadow: 1px 1px 3px black;
    cursor:pointer;
    }
    
    input[type="reset"]{
    background-color:#837a7a;
    border:none;
    padding:10px;
    color:white;
    font-size:17px;
    font-weight:bold;
    border-radius:5px;
    margin:0 5px;
    box-shadow: 1px 1px 3px black;
    cursor:pointer;
    }
    
    .b{
        margin-top: 50px;
        margin-bottom: 50px;
        text-align:center;
        font-size:20px;
    }
    
    .b p{
       text-align: left;
    }
    #aaa{
       padding-left: 20px;
        text-align:left;
        
    }


    #btn {
        display: inline-block;
        text-decoration: none;
        background: #87befd;
        color: #FFF;
        width: 160px;
        height: 160px;
        line-height: 160px;
        border-radius: 50%;
        text-align: center;
        overflow: hidden;
        box-shadow: 0px 0px 0px 5px #87befd;
        border: dashed 1px #FFF;
        transition: .4s;
      }
      
    #btn hover {
        background: #668ad8;
        box-shadow: 0px 0px 0px 5px #668ad8;
      }



/* メディアクエリ設定 */
@media screen and (max-width: 768px) {
 
    .menu3{
        width: 95%;
      }

      .top p{
        width: 100%;
        font-size: 150%;   
      }
     #al{
        width:85%;
     }
     
      .b{
        width: 85%;  
     }
    .form{
        width:85%;
    }
    .contact-form{
        width:85%;
    }
    .title{
        width: 100%;
    }
    .inputs{
        width: 85%;
    }
    .item{
        width: 85%;
    }
    .button-area{
        width: 85%;
    }

    .label{
        width: 85%;
    }
    #aaa{
        width: 85%;
    }
    #aaa p{
        width: 85%;
    }
    textarea{
        width: 100%;
}
.b{
    width: 100%;
}
iframe{
    width: 100%;
}
}