@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap');
/* CSS Document */
.main {
  background: url("../img/bg.png");
  background-size: 1375px;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
}
.top-wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
}
.flex-wrap {
  padding: 0 0% 0 7%;
  width: 93%;
  margin: 38px 0 20px 0%;
  display: block;
}
.flex-wrap img {
  width: 100%;
  top: 0;
  margin: auto;
}
.info_box {
  margin: 0px 63px 8px auto;
  display: flex;
  justify-content: flex-start;
  align-items: start;
  width: 473px;
}
.info_txt1 {
  font-size: 1.4rem;
  background-color: #326CAF;
  color: #FFF;
  font-weight: 600;
  text-align: center;
  width: 80px;
  margin: 0 15px 0 0;
  padding: 4px 0px;
  border-radius: 100vh;
}
.info_txt2 {
  text-shadow: 0px 0px 10px #FFF, 0px 0px 10px #FFF, 0px 0px 10px #FFF, 0px 0px 10px #FFF, 0px 0px 10px #FFF, 0px 0px 10px #FFF, 0px 0px 10px #FFF;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.copyright {
  color: #FFF;
  font-size: 1.0rem;
}
.txt26 {
  font-size: 2.6rem;
  display: inline-block;
}
.txt20 {
  font-size: 2.0rem;
  display: inline-block;
}
.txt15 {
  font-size: 1.5rem;
  line-height: 160%;
  display: inline-block;
  margin: -5px 0px 0px 0px;
}
h2.title1 {
  max-width: 473px;
  margin: 80px 65px 17px auto;
}
h2.title1 img {
  filter: drop-shadow(0px 0px 5px #FFF);
}
.mb5 {
  margin-bottom: 4px;
}
h2.title1 img {
  width: 100%;
}
.organizing_bg {
  margin: 0px auto 0px auto;
  background: #326CAF;
  padding-inline: calc((100vw - 1200px) / 2);
  display: flex;
  justify-content: flex-end;
}
.organizing_btn {
  cursor: pointer;
  align-items: center;
  margin: 40px 0px;
}
.organizing_btn a {
  text-decoration: none;
  color: #3E3A39;
  font-weight: 600;
  font-size: 1.7rem;
  background-color: #FFF;
  border-radius: 100vh;
  padding: 12px 60px 12px 30px;
  display: inline-block;
  position: relative;
}
.organizing_btn a:hover {
  opacity: 0.8;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.organizing_btn a:after {
  content: '';
  width: 9px;
  height: 9px;
  border-bottom: 3px solid #D2A241;
  border-right: 3px solid #D2A241;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: absolute;
  top: 40%;
  margin: 0px 0px 0px 25px;
}
.info {
  max-width: 1200px;
  width: 100%;
  margin: 0px auto 0px auto;
  position: relative;
}
.info_title {
  margin: 80px 0px 20px auto;
  position: relative;
  width: calc(100% - 340px);
  padding: 0px 0px 0px 25px;
}
.info_title img {
  width: 125px;
}
.info_title:after {
  content: '';
  width: 10px;
  height: 10px;
  background: #326CAF;
  border-radius: 100vh;
  position: absolute;
  top: 25%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: 0px;
  margin: 0px 0px 0px 0px;
}
.date {
  width: calc(100% - 340px);
  margin: 0px 0px 0px auto;
  height: 350px;
  overflow-y: scroll;
}
.date dl {
  width: 100%;
  margin: 0px 0px 10px 0px;
  display: flex;
  line-height: 170%;
}
.date dt {
  padding: 0px 20px 0px 0px;
  width: auto;
  color: #818EA3;
}
.date dd {
  width: auto;
  padding: 0px 0px 0px 0px;
}
.welcome {
  width: calc(100% - 340px);
  margin: 0px 0px 0px auto;
}
.welcome img {
  max-width: 386px;
  margin: 0px auto;
  display: block;
}
.video {
  width: calc(100% - 340px);
  margin: 20px 0px 0px auto;
}
.video iframe {
  aspect-ratio: 16 / 9;
  width: 76%;
  height: 76%;
  margin: 0 12%;
}
.ad {
  width: 865px;
  position: absolute;
  top: 300;
  right: 0;
  display: flex;
  margin: 60px 0px 40px 0px;
}
.ad a:hover {
  opacity: 0.8;
}
@media screen and (max-width:1200px) {
  .main {
    background-position: top right -100px;
  }
  .top-wrapper {
    width: 98%;
  }
  .flex-wrap {}
  h2.title1 {
    margin: 80px 5% 17px auto;
  }
  .info_box {
    margin: 0px 5% 8px auto;
  }
  .info {
    width: calc(100% - 300px);
    margin: 0px 0px 0px auto;
  }
  .date {
    width: 100%;
  }
  .info_title {
    width: 100%;
  }
  .welcome {
    width: 100%;
  }
  .video {
    width: 100%;
    margin: 20px 0px 0px 0px;
  }
  .ad {
    width: 100%;
  }
}
@media screen and (max-width:1024px) {
  .main {
    background: url(../img/bg_sp1.png), url(../img/bg_sp.png);
    background-size: 1100px, 1100px;
    background-repeat: no-repeat, no-repeat;
    background-position: top center, top right 50%;
  }
  .top-wrapper {
    width: 100%;
  }
  .flex-wrap {
    width: 100%;
    position: relative;
    padding: 0;
    z-index: 1;
    margin: 0px 0 0px 0%;
    background: url(../img/bg_sp2.png);
    background-size: 420px;
    background-repeat: no-repeat;
    background-position: bottom right -100px;
    padding-bottom: 30px;
  }
  .info_box {
    margin: 0px auto 8px auto;
  }
  h2.title1 {
    margin: 135px auto 17px auto;
  }
  .copyright {
    position: absolute;
    top: 10px;
    right: 30px;
  }
  .organizing_bg {
    padding: 30px 0px;
  }
  .organizing_btn {
    margin: 0px auto;
  }
  .info {
    width: 86%;
    margin: 0 auto;
  }
  .video iframe {
    width: 100%;
    height: 100%;
    margin: 0 0%;
  }
  .ad {
    position: static;
  }
  .main_title img {
    width: 100%;
  }
}
@media screen and (max-width:800px) {
  .main_title {
    width: 100%;
    margin: 0px auto 2% auto;
  }
  .main {
    background: url(../img/bg_sp1.png), url(../img/bg_sp.png);
    background-size: 135%, 120%;
    background-repeat: no-repeat, no-repeat;
    background-position: top center, top 0% left 70%;
  }

  h2.title1 {
    margin: 19% auto 5% auto;
    width: 90%;
  }
    .info_box {
        margin: 0px auto 8px 5%;
    }
    
}
@media screen and (max-width:700px) {
    
        
    .flex-wrap {
        background-position: bottom right -150px;

    }
    
  .main_title {
    margin: 0 auto 5% auto;
    width: 85%;
  }
  h2.title1 {
    margin: 23% auto 5% auto;
  }
  .copyright {
    position: absolute;
    top: 10px;
    right: 20px;
  }
  .ad {
    width: 100%;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
  }

}
@media screen and (max-width:600px) {
  .flex-wrap {
    background-position: top 30% right -40%;
       background-size: 55%;
  }
.info_box {
        margin: 0px auto 8px auto;
    width: 90%;
    }

    
  .main_title {
    margin: 0 auto 28% auto;
    width: 80%;
  }
  .info_txt1 {
    padding: 3px 0px;
    width: 15%;
    margin: 3px 10px 0 0;
    font-size: 1.5rem;
  }
  .date dl {
    display: inline-block;
  }
  .date dt {
    padding: 0px 0px 5px 0px;
  }
}
@media screen and (max-width:500px) {
  .flex-wrap {
    background-position: top 25% right -44%;
  }
  .info_box {
    display: block;
    width: 85%;
    margin: 0px auto;
  }
  .info_txt1 {
    margin: 10px auto 10px auto;
    width: 100%;
  }
  .welcome img {
    max-width: 100%;
  }
  .txt26 {
    font-size: 2.2rem;
  }
  .txt20 {
    font-size: 1.7rem;
  }
  .info_title {
    margin: 80px 0px 0px auto;
  }
}
@media screen and (max-width:400px) {
  .flex-wrap {
    background-position: top 19% right -44%;
  }
  .info_txt2 {
    display: block;
  }
  .info_txt2 div {
    margin-bottom: 10px;
  }
}