.oubo2022{
    background:url("../../assets/images/oubo2022/bg.svg") top 80% center no-repeat !important;
    background-size: 2000px !important;
    background-color: #F3B0CD !important;
  }
    @media screen and (max-width: 767px){
  .oubo2022{
      background:url("../../assets/images/oubo2022/bg.svg") top 20% center no-repeat !important;
      background-size: 1000px !important;
      background-color: #F3B0CD !important
  }
    }
  .oubo2020 .l-oubo-content h5 span{
    background: linear-gradient(transparent 70%, #ede44a 0%);
    display: inline;
    padding: 0 1px 0;
  }
  .oubo2020 .l-oubo-content h5:before{
    display: none;
  }
  .oubo2022-result {
    background-color: #F3B0CD !important;
  }
  .l-index-feature_2022{
    background: #F3B0CD;
    height: auto;
  }
  .index-main--2022-wrapper{
    display: flex;
    justify-content: center;
    background: #F3B0CD;
  }
  .index-main--2022{
    background: #F3B0CD;
    height: 100%;
  }
    .index-main--2022 .pc{
      display: flex;
    }
      @media screen and (max-width: 767px){
    .index-main--2022 .pc{
        display: none
    }
      }
    .index-main--2022 .sp{
      display: none;
    }
      @media screen and (max-width: 767px){
    .index-main--2022 .sp{
        display: flex
    }
      }
    .index-main--2022 h1{
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
      .index-main--2022 h1 img{
        width: 100%;
        height: auto;
      }
.tw-relative{
    position:relative !important;
}
.tw-z-20{
    z-index:20 !important;
}
.tw-flex{
    display:flex !important;
}
.tw-h-auto{
    height:auto !important;
}
.tw-w-full{
    width:100% !important;
}
.tw-flex-col{
    flex-direction:column !important;
}
.tw-items-center{
    align-items:center !important;
}
.tw-justify-center{
    justify-content:center !important;
}
.tw-overflow-hidden{
    overflow:hidden !important;
}
.tw-rounded-2xl{
    border-radius:1rem !important;
}
.tw-bg-white{
    --tw-bg-opacity:1 !important;
    background-color:rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
}
.tw-px-12{
    padding-left:3rem !important;
    padding-right:3rem !important;
}
.tw-py-4{
    padding-top:1rem !important;
    padding-bottom:1rem !important;
}
.tw-py-14{
    padding-top:3.5rem !important;
    padding-bottom:3.5rem !important;
}
.tw-px-8{
    padding-left:2rem !important;
    padding-right:2rem !important;
}
.tw-text-14{
    font-size:14px !important;
}
.tw-text-18{
    font-size:18px !important;
}
@media (max-width: 767px){
    .max-md\:tw-flex{
        display:flex !important;
    }
    .max-md\:tw-hidden{
        display:none !important;
    }
    .max-md\:tw-flex-col{
        flex-direction:column !important;
    }
    .max-md\:tw-items-center{
        align-items:center !important;
    }
}

.main-index{
  display:grid;
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l-index-feature_2023{
    height: 100vh;
    position:sticky;
    display: flex;
    width: 100%;
    justify-content:center;
    align-items: center;
    top: 0;
    grid-column: span 1 / span 1;
    background: #28469b;
}
  @media screen and (max-width: 767px) {
      .l-index-feature_2023{
          position:static;
          height: 85vh;
          width: 100%;
          grid-column: span 2 / span 2;
      }
  }

.l-index-event{

  grid-column: span 1 / span 1;
}

  @media screen and (max-width: 767px) {
      .l-index-event {
          grid-column: span 2 / span 2;
      }
  }

.oubo2023{
  background:url("../../assets/images/oubo2023/bg.svg") top 80% center no-repeat !important;
  background-color: #28469b !important;
}
@media screen and (max-width: 767px) {
    .oubo2023 {
        background: url("../../assets/images/oubo2023/bg.svg") top 20% center no-repeat !important;
        background-color: #28469b !important
    }
}
.event-box ul{
    display: grid !important;
    gap: 5rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
  @media screen and (max-width: 1200px) {
      .event-box ul{
          grid-template-columns: repeat(4, minmax(0, 1fr));
      }
  }
.event-box li{
  grid-column: span 1 / span 1;
  width: 100% !important;
}
  @media screen and (max-width: 1200px) {
      .event-box li {
          grid-column: span 2 / span 2;
      }
  }
  @media screen and (max-width: 767px) {
      .event-box li {
          grid-column: span 4 / span 4;
      }

  }

.index-main--2023-wrapper{
  display: flex;
  justify-content: center;
  background: #28469b;
    width: 100%;
    height: 100% !important;
}
  @media screen and (max-width: 767px) {
      .index-main--2023-wrapper{
          width: 100%;
      }
  }
.index-main--2023{
  background: #28469b;
  height: 100%;
    width: 100%;
}
  @media screen and (max-width: 767px) {
      .index-main--2023 {
          width: 100%;
      }
  }

.index-main--2023 img{
    width:100%;
    height:100%;
}
  @media screen and (max-width: 767px) {
      .index-main--2023 img{
          width:95%;
          height:auto;
      }
  }
.index_h1{
    height: 100%;
}