/* @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); */

.flex-container-act {
  padding: 1em 0px 0px 0px;
  /* list-style-type: none; */
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */

  font-family: 'Noto Sans JP', sans-serif;
}

.flex-item-act {
  flex-basis: 50%;
  text-align: center;
  margin-bottom: 40px;
}

.flex-item-act img{
  width: 95%;
  border-radius: 30px;

  /* border: 3px solid var(--color-main);
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 30px 30px;
  border-bottom-right-radius: 40px 40px;
  border-bottom-left-radius: 40px 40px; */
}

.explain {
  margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 14px;
  color: #363636;
}

.flex-container-act .title {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-main);
}

.flex-container-act .text {
  width: 80%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  color: #363636;
}

.flex-container-act a {
  text-decoration: underline;
  font-weight: 400;
  font-size: 14px;
  color: var(--gray-7);
}

.flex-container-act a:hover {
  color: var(--color-sub2);
}

/* スマホ　767px以下 */
/* @media only screen and (max-width: 1280px) { */
@media (orientation: portrait) and (max-width: 767px){
  .flex-item-act {
    flex-basis: 100%;
  }
}
@media screen and (width <= 1023px){

  .flex-container-act .title {
    /* font-size: 18px; */
    font-size: 24px;
  }
  .flex-container-act .text {
    /* font-size: 18px; */
    font-size: 24px;
  }
  .flex-container-act a {
    /* font-size: 18px; */
    font-size: 24px;
  }

}

/* =========================
   Pop: Activities
   ========================= */
body.page-index .flex-item-act{
  padding: 6px 0 2px;
}

body.page-index .flex-item-act img{
  display: block;
  margin: 0 auto;
  background: rgba(255,255,255,0.95);
  padding: 10px;
  border-radius: 26px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  transition: transform .18s ease, box-shadow .18s ease;
}

body.page-index .flex-item-act img:hover{
  transform: translateY(-6px) rotate(-0.35deg);
  box-shadow: 0 22px 55px rgba(0,0,0,0.18);
}

body.page-index .flex-container-act .title{
  position: relative;
  display: inline-block;
}
body.page-index .flex-container-act .title::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  bottom: 2px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,217,61,0.70);
  z-index: -1;
  transform: rotate(-1.2deg);
}