body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 3.5s ease 0s 1 normal;
 margin: 0 auto;  
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}    
}

.smartNav{
  display: none;
}


header{
  width: 1400px;
  margin: 0 auto;
}

.Comment{
  width: 90%;
  height: 500px;
}

.text{
  margin-top: 20px;
  width: 100%;
  height: 400px;
  text-align: center;
}

/* お問い合わせフォーム*/
#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:80%;
    
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

input,textarea{
  border: solid 1px black;
}


/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:800px) {

  *{
    margin: 0 auto;
  }
  
  
#formWrap {
	width:90%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:70%;
	padding:5px;
	font-size:110%;
    border: solid 1px;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
    border: solid 1px black;
	width:100%;
	height:40px;
}
}

/*お問い合わせフォーム終わり*/



body{
  font-family: 'NotoSansCJKjp', "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
  width: 1400px;
  color:#515151;
}



h3{
  font-size: 30px;
  margin-bottom: 40px;
}


.Comment{
  text-align: center;
  font-family: 'NotoSansCJKjp', "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
  background-color:#e2e2e2;
  width:1400px;
  height: 600px;
  color:#515151;
  margin: 100px auto;
}


.text{
  font-size: 20px;
    line-height: 250%;
}

h2{
  font-size: 40px;
}

a { text-decoration: none;}
a:hover { opacity: 0.6;}
a:link{color: #515151;}
a:visited{color: darkgray;}

footer{
  text-align: center;
  font-family: 'Assistant', sans-serif;
  margin-top: 100px;
  width:1400px;
  height: 300px;
  color:#515151;
  line-height: 250%
}

.icon{
  width: 64px;
  height: 64px;
  float: left;
  margin: 200px;
}

.copyright{
  text-align: center;
  margin: 0 auto;
  margin-bottom: 100px;
}




/*メディアクエリ*/
@media screen and (max-width:800px){

  body{
    width: 100%;
    text-align: center;
  }
  
  #nav-drawer{
    margin-top: -80px;
  }

  
  .Comment{
    width: 100%;
    height: 100%;
    margin-top: 100px;
  }
  
  h2{
    font-size: 20px; 
  }
  
  .text{
    font-size: 13px;
  }
  
  footer{
    max-width:100%;
    clear: both;
    width: 100%;
  }
  
  .icon-image{
    width: 100%;
    margin:0 auto;
  }
  
  .icon{
    width:11%;
    height: auto;
    margin: 11%;
  }
  
  .copyright{
    text-align: center;
    width: 100%;
  }
  
  
  .nav{
   display: none;
  }
  
  .nav li{
    margin-top: 1px;
  }
  .smartNav{
    display: inherit;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.94);
    position: fixed;
    bottom: 0;
    z-index: 100;
  }
  
  i{
    font-size:25px;
    width:15%;
    display: flex;
    padding-top: 10px;
    color:gray;
  }
  
}