@charset "utf-8";

/**
 * 
 *  活動内容
 *
 */

 /* PC用------------------------------------------------------------------------------------------------------------------------ */
@media print,screen and (min-width : 501px) {

#work h2{
  display: inline-block;
  background-color: #f28e1e;
  color: #fff;
  padding: 5px 20px;
  font-size:20px;font-size:2.0rem;
  font-family:"NotoSansJP-5";
  -webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;border-radius:20px;
}


#work1{
  margin-top: 40px;
}
  #work1 img{
    margin: 20px 0 0 0;
  }
  #work1 ul{
    margin-top: 20px;
    border:solid 1px #cccccc;
    padding: 20px;
  }
  #work1 ul li{
    list-style-type: disc;
    margin-left: 20px;
  }

#work2{
  margin-top: 40px;
}
  #work2 #work2_1{
  margin-top: 20px;
  }
  #work2 ul{
    margin-top: 10px;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -ms-flex-wrap: wrap;flex-wrap: wrap;
    -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
  }
  #work2 #square li{
    width: 350px;
    margin-bottom: 16px;
    padding: 10px;
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
  }
  #work2 #square::after {
    content: "";
    display: block;
    width: 350px;
    height: 0;
  }
  #work2 #rectangle li{
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
  }
  #work2 section{
    margin-top: 20px;
    padding: 0 10px;
  }
  #work2 section h3{
    margin-top: 20px;
    font-size:18px;font-size:1.8rem;
    font-family:"NotoSansJP-5";
  }





}

 /* スマホ用------------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width : 500px) {

#work h2{
  display: inline-block;
  background-color: #f28e1e;
  color: #fff;
  padding: 5px 20px;
  font-size:18px;font-size:1.8rem;
  font-family:"NotoSansJP-5";
  -webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;border-radius:20px;
}


#work1{
  margin-top: 40px;
}
  #work1 #work1_1{
    margin: 20px 0 0 0;
    overflow-x: auto;
  }
  #work1 #work1_1 div{
    width: 1000px;
  }
  #work1 ul{
    margin-top: 20px;
    border:solid 1px #cccccc;
    padding: 10px;
  }
  #work1 ul li{
    list-style-type: disc;
    margin-left: 10px;
  }

#work2{
  margin-top: 40px;
}
  #work2 #work2_1{
  margin-top: 20px;
  }
  #work2 ul{
    margin-top: 10px;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    -ms-flex-wrap: wrap;flex-wrap: wrap;
    -webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
  }
  #work2 #square li{
    width: 48%;
    margin-bottom: 20px;
    padding: 5px 5px 5px 5px;
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
  }
  #work2 ul li p{
    background-color: #fff;
    padding: 5px 5px 0px 5px;
  }
  #work2 #rectangle li{
    width: 100%;
    margin-bottom: 20px;
    padding: 5px 5px 5px 5px;
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
  }
  #work2 section{
    margin-top: 10px;
    padding: 0 10px;
  }
  #work2 section h3{
    margin-top: 10px;
    font-size:18px;font-size:1.8rem;
    font-family:"NotoSansJP-5";
  }



}