.activityarea{
     position:relative;
     margin:0 auto;
     width:80%;
}

@media screen and (max-width: 768px) {
.activityarea{
    width:98%;
}}




.tab4 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    background-color: #efefef !important;
    margin: 0 !important;

  }


  .tab4__item {
    flex: 1;
  }
  .tab4__link {
    position: relative;
    display: block;
    text-decoration: none;
    color: #111;
    cursor: pointer;
    height:60px;
    line-height:60px;
  }
  .tab4__link:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 0;
    height: 1px;
    background-color: #990000;
    transition: all 0.4s ease-out;

  }
  .tab4__link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: #990000;
    transition: all 0.4s ease-out;
  }
  .tab4__link.on:before {
    width: 50%;
  }
  .tab4__link.on:after {
    width: 50%;
  }
  .tab4-body {
    position: relative;
    min-height: 800px;
    background-color:#f8f8f8;
  }
@media screen and (max-width: 768px) {
  .tab4-body {
   min-height:1300px;
}}



  .tab4-body__item {
    position: absolute;
    margin: 0
    text-align: center;
    opacity: 0;
    transition: all 0.6s ease-out;
  }

.tab4-body__item h4{
  margin:0;
  padding:20px 2px 2px 20px;
  text-align:left;
font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size:1.7em;
  font-weight:300;
}

.tab4-body__item p{
   text-align:left;
   font-size:.9em;
   line-height:1.8;
   padding:10px 30px;
}

  .tab4-body__item.on {
    opacity: 1;
  }












.tab3 {
    position: relative;
    display: flex;
    flex-direction: row;
    text-align: center;
    background-color: #fff !important;
    margin: 0 !important;
    padding: 10px 0 !important;
  }
  .tab3:after {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    display: block;
    width: 20%;
    height: 32px;
    border: solid 1px #444;
    border-radius: 4px;
    transition: all 0.6s ease;
  }
  .tab3--1:after {
    left: 0;
  }
  .tab3--2:after {
    left: 20%;
  }
  .tab3--3:after {
    left: 40%;
  }
  .tab3--4:after {
    left: 60%;
  }
  .tab3--5:after {
    left: 80%;
  }
  .tab3__item {
    flex: 1;
  }
  .tab3__link {
    display: block;
    text-decoration: none;
    color: #444;
    cursor: pointer;
  }
  .tab3__link.on {
  }
  .tab3-body__item {
    margin: 30px 15px;
    display: none;
    text-align: center;
  }
  .tab3-body__item.on {
    display: block;
  }