@media screen and (min-width: 769px){

  .logo{
    width: 100%;
    margin: auto;
    text-align: center;
    overflow: hidden;
  }
  .logo img{width: 80%;}

.event-title{
  width: 100%;
  clear: both;
  margin: auto;
  margin-bottom: 5%;
  font-size: 0.9rem;
  line-height: 1.8;
  text-align: center;
}
.event-title img{width: 60%;}
.title_m{display: none;}

.detailcontainer{
  width: 100%;
  height: auto;
  margin: auto;
}

.detail-box{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.workshop_detail{
  width: 42%;
  height: auto;
  margin-top: : 5%;
  margin-bottom: 10%;
  padding: 1%;
  font-size: 0.9rem;
  line-height: 1.7;
}

.workshop_detail img{width: 100%;}
.title-margin{margin: 3% 0;}
.title-margin2{margin-top: 1%;}
ul { padding-left: 20px;}
ul li {
  padding-left: 5px;
  padding-top: 10px;
  line-height: 1.7;
}
.yoyaku{
  width: 100%;
  margin-top: 2%;
}
.yoyaku2{
  width: 100%;
  margin-top: 2%;
  margin-bottom: 5%;
}
.yoyaku3{
  width: 100%;
  margin-top: -2%;
  margin-bottom: 5%;
}
.yoyaku img{width: 50%;}
.yoyaku2 img{width: 50%;}
.yoyaku3 img{width: 50%;}

}

@media screen and (min-width: 481px)
    and (max-width: 768px){
.logo{
  width: 100%;
  margin: auto;
  text-align: center;
  overflow: hidden;
}
.logo img{width: 90%;}

.event-title{
  width: 100%;
  clear: both;
  margin: auto;
  margin-bottom: 5%;
  font-size: 0.8rem;
  line-height: 1.8;
  text-align: center;
}
.event-title img{width: 80%;}
.title_m{display: none;}

.detailcontainer{
  width: 100%;
  height: auto;
  margin: auto;
}

.detail-box{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.workshop_detail{
  width: 42%;
  height: auto;
  margin-top: : 5%;
  margin-bottom: 10%;
  padding: 1%;
  font-size: 0.8rem;
  line-height: 1.6;
}

.workshop_detail img{width: 100%;}
.title-margin{margin: 3% 0;}
.title-margin2{margin-top: 1%;}
.workshop_detail ul { padding-left: 20px;}
.workshop_detail ul li {
  padding-left: 5px;
  padding-top: 10px;
  line-height: 1.7;
}

.yoyaku{
  width: 100%;
  margin-top: 2%;
}
.yoyaku2{
  width: 100%;
  margin-top: 2%;
  margin-bottom: 5%;
}
.yoyaku3{
  width: 100%;
  margin-top: -2%;
  margin-bottom: 5%;
}
.yoyaku img{width: 70%;}
.yoyaku2 img{width: 70%;}
.yoyaku3 img{width: 70%;}

}

@media screen and (max-width: 480px){
.logo{
  width: 100%;
  margin: 25% auto 0;
  overflow: hidden;
}
.logo img{width: 100%;}

.event-title{
  width: 100%;
  clear: both;
  margin: auto;
  margin-bottom: 5%;
  font-size: 0.8rem;
  line-height: 1.8;
  text-align: center;
}
.event-title img{width: 100%;}
.title{display: none;}

.detailcontainer{
  width: 100%;
  height: auto;
  margin: auto;
}

.detail-box{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.workshop_detail{
  width: 100%;
  height: auto;
  margin-top: : 5%;
  margin-bottom: 10%;
  padding: 1%;
  font-size: 0.8rem;
  line-height: 1.7;
}

.workshop_detail img{width: 100%;}
.title-margin{margin: 3% 0;}
.title-margin2{margin-top: 1%;}
.workshop_detail ul { padding-left: 20px;}
.workshop_detail ul li {
  padding-left: 5px;
  padding-top: 10px;
  line-height: 1.7;
}

.yoyaku{
  width: 100%;
  margin-top: 2%;
}
.yoyaku2{
  width: 100%;
  margin-top: 2%;
  margin-bottom: 5%;
}
.yoyaku3{
  width: 100%;
  margin-top: -2%;
  margin-bottom: 5%;
}
.yoyaku img{width: 70%;}
.yoyaku2 img{width: 70%;}
.yoyaku3 img{width: 70%;}

}