body {
    background-color: #ffee00;
 }


 .header{
    margin-top: 0px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header__inner{
    max-width: 1152px;
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .header__logo{
    flex: none;
    width: auto;
    height: 35px;
  }
  .header__navgroup{
    margin-left: auto;
    display: flex;
    flex: none;
  }
  .header__navgroup > * + *{
    margin-left: 60px;
  }
  .header__navitem{
    font-size: 21px;
    color: #fff;
  }

  










 moji.example1 {
    color: rgb(0, 0, 0);

  }
  .box{
    width:80%;
    text-align:center;
    z-index:10000;
       background: #ffffff;
       box-shadow: 0px 0px 0px 5px rgb(0, 0, 0);
       border: dashed 3px rgb(0, 0, 0);/*点線*/
       padding: em;
       margin: 100px 10% 0px 10%;}/*（上右下左）*/
   .box p {margin: 0; padding: 0;}








 
 il{

 list-style:none;
 display:inline-block;
 padding: auto;
 width: 330px;
 height: 300px;
 vertical-align:middle;
 text-align: center;

 }



 .over-animation{
    position: relative; /* 画像について絶対配置abosoluteを用いるため、親はrelativeに設定する */
    height:335px;
   }
   .over-animation img{
     position: absolute;
     left:10px;
     top:0px;
     width:320px;
     transition: all 0.5s;
   }
   .over-animation:hover img{
     left:0px; /* 10px→0px とし、幅も600から630とする  実際の動作を確認して指定すると良い */
     top:0px;
     width:340px;
   }




  small{
    color:#fff;
    display: block;
    text-align: center;
  }
  
  #footer{
    background:#000000;
    width:100%;
    padding:30px;
    font-family:'Zen Maru Gothic', sans-serif;
    margin-top:0px;
  }