/* flexbox */
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.box-item-ico {
  /* アイコンの解説 */
  padding: 1% 0%;
  width: 20%;
}

.box-item-index {
  background-color: ;
  margin: 4% 0.5%;
  padding: 4%;
  width: 99%;
  flex-direction: column;
  box-shadow: 0px 4px 7px rgba(69, 91, 99, 0.0);
  position: relative;
  overflow: hidden;
}

.box-item-info1 {
  width: 49%;
  margin: 1% 0.5%;
  padding: 5%;
  border: solid 0px rgba(231, 188, 99, 0);
  background-color: rgba(231, 188, 99, 0.2);
  border-radius: 10px;
  margin-top: 10px;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.box-item-info2 {
  width: 49%;
  margin: 1% 0.5%;
  padding: 3% 3% 3% 3%;
  border: dotted 3px #ccc;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  margin-bottom: 10px;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.box-item-info3 {
  width: 99%;
  margin: 1% 0.5%;
  padding: 5%;
  border: solid 0px rgba(231, 188, 99, .5);
  background-color: rgba(240, 240, 240, 1);
  border-radius: 10px;
  margin-top: 10px;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}



.box-item-keshki {
  background-color: #fff;
  border: solid 0px #6a3906;
  margin: 2% 1%;
  padding: 2%;
  width: 23%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  display: flex;
}

.box-item-nearby {
  background-color: #fff;
  border: solid 0px #6a3906;
  margin: 2% 1%;
  padding: 2%;
  width: 48%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
}

.box-item-guide {
  background-color: #fff;
  border-radius: 12px;
  margin: 1% 0%;
  padding: 2%;
  width: 100%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.box-item-guide2 {
  background-color: #fff;
  border-radius: 12px;
  margin: 1% 1% 1% 0%;
  padding: 4%;
  width: 49%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.box-item-guide3 {
  background-color: #fff;
  border-radius: 12px;
  margin: 1% 0% 1% 1%;
  padding: 4%;
  width: 49%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.box-item-activity {
  background-color: #fff;
  border-radius: 12px;
  margin: 1% 0%;
  padding: 2%;
  width: 100%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.box-item-hearing {
  background-color: #fff;
  border-radius: 12px;
  margin: 2% 2%;
  padding: 4%;
  width: 29.3333%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.box-item-job {
  background-color: #fff;
  border-radius: 12px;
  margin: 1% 1%;
  padding: 4%;
  width: 48%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.box-item-channel {
  background-color: #fff;
  border-radius: 12px;
  margin: 1% 1%;
  padding: 4%;
  width: 31.333%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.box-item-takeout {
  background-color: #fff;
  border-radius: 12px;
  margin: 1% 0%;
  padding: 4%;
  width: 100%;
  flex-direction: column;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  position: relative;
  overflow: hidden;
}

.box-item-bus {
  background-color: ;
  border-radius: 12px;
  margin: 1% 1%;
  padding: 1% 6%;
  width: 48%;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.box-item-EVT {
  width: 59%;
  margin: 0.5%;
  padding: 3% 3%;
  border-radius: 10px;
  margin-top: 10px;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.box-item-EVT2 {
  width: 39%;
  margin: 0.5%;
  padding: 3% 3%;
  border-radius: 10px;
  margin-top: 10px;
  background-color: rgba(231, 188, 99, 0.2);
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 840px) {
  .box-item-EVT, .box-item-EVT2 {
    width: 99%;
  }
}

.box-item-EVT3 {
  width: 99%;
  margin: 0.5%;
  padding: 3% 3%;
  border-radius: 10px;
  margin-top: 10px;
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
}

.box-item-sr {
  width: 31%;
  margin: 1%;
  padding: 3% 3%;
  background-color: #c8d5bb;
  border-radius: 10px;
  margin-top: 0px;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.box-item-sr2 {
  width: 70%;
  margin: 0% 15%;
  padding: 3% 3%;
  background-color: #c8d5bb;
  border-radius: 10px;
  margin-top: 0px;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.box-item-sr3 {
  width: 24%;
  margin: 0.5%;
  padding: 1%;
  background-color: #ede4cd;
  border-radius: 10px;
  margin-top: 0px;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.box-item-sr3 p {
  font-size: 0.85em;
}

@media screen and (max-width: 1000px) {
  .box-item-sr {
    width: 48%;
    margin: 1%;
  }

  .box-item-sr2 {
    width: 98%;
    margin: 2% 1%;
  }

  .box-item-sr3 {
    width: 32%;
    margin: 0.5%;
  }
}

@media screen and (max-width: 767px) {
  .box-item-sr3 {
    width: 48%;
    margin: 1%;
  }
}

@media screen and (max-width: 640px) {
  .box-item-sr {
    width: 90%;
    margin: 2% 5%;
  }

  .box-item-sr3 {
    width: 90%;
    margin: 1% 5%;
  }
}

@media screen and (max-width: 1100px) {
  .box-item-ico {
    margin: 0%;
    padding: 0%;
    width: 25%;
  }
}

@media screen and (max-width: 980px) {
  .box-item-keshki {
    width: 48%;
  }

  .box-item-hearing {
    margin: 1%;
    padding: 2%;
    width: 31.3333%;
  }

  .box-item-job {
    margin: 2% 1%;
    padding: 3%;
    width: 48%;
  }

  .box-item-bus {
    margin: 1% 25%;
    padding: 1% 1%;
    width: 48%;
  }
}

@media screen and (max-width: 840px) {
  .box-item-index {
    background-color: #f3fcf6;
    margin: 1% 0.5%;
    padding: 4%;
    width: 49%;
    flex-direction: column;
    box-shadow: 0px 4px 7px rgba(69, 91, 99, 0.2);
    position: relative;
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  .box-item-ico {
    padding: 0.5% 2%;
    width: 31.3333%;
  }

  .box-item-channel {
    width: 48%;
  }
}

@media screen and (max-width: 640px) {
  .box-item-keshki {
    width: 100%;
    margin: 2% 0%;
    padding: 4%;
  }

  .box-item-ico {
    margin: 1% 0%;
    width: 33.3333%;
  }

  .box-item-info1 {
    width: 100%;
    margin: 1% 0%;
    padding: 4%;
  }

  .box-item-info1 h1 {
    font-size: 1.1em;
  }

  .box-item-info2 {
    width: 100%;
    margin: 1% 0%;
  }

  .box-item-info2 iframe {
    height: 200px;
  }

  .box-item-guide2, .box-item-guide3 {
    width: 98%;
  }

  .box-item-hearing {
    width: 48%;
  }

  .box-item-job {
    margin: 2% 0%;
    padding: 4%;
    width: 100%;
  }

  .box-item-bus {
    margin: 1% 0%;
    padding: 1% 5%;
    width: 100%;
  }

  .box-item-EVT {
    width: 100%;
    margin: 3% 0%;
    padding: 3% 3%;
    background-color: #f2f3f2;
    box-shadow: 0px 4px 16px rgba(69, 91, 99, 0);
    border-radius: 0px;
    margin-top: 0px;
  }

  .box-item-EVT2 {
    width: 100%;
    margin: 3% 0%;
    padding: 3% 3%;
    box-shadow: 0px 4px 16px rgba(69, 91, 99, 0);
    border-radius: 0px;
    margin-top: 0px;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  .box-item-EVT3 {
    width: 100%;
    margin: 3% 0%;
  }
}

@media screen and (max-width: 480px) {
  .box-item-index {
    margin: 1% 0%;
    padding: 4%;
    width: 100%;
  }



  .box-item-nearby {
    background-color: #fff;
    border: solid 0px #6a3906;
    margin: 2% 1%;
    padding: 2%;
    width: 98%;
    flex-direction: column;
    box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.2);
    position: relative;
  }

  .box-item-hearing {
    width: 100%;
    margin: 2% 0%;
    padding: 8%;
  }

  .box-item-channel {
    margin: 2% 0%;
    padding: 5%;
    width: 100%;
  }
}