/*========================================================
　　トップページ　css
　========================================================*/
/*共通---------------------------------------------------*/
.bg-color {
  background: #f0f0f0;
}

/*背景文字*/
.bg-text {
  position: absolute;
  color: #f8f8f8;
  font-size: 250px;
  font-weight: bold;
  letter-spacing: .08em;
  pointer-events: none;
}

.bg-text-about {
  top: -113px;
  left: 0;
}

.bg-text-workshop {
  top: -220px;
  left: 0;
}

.contents-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/*------------------*/

/*★投稿のタイトル*/
.post-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;

  time {
    color: #a6a7a7;
  }

  h3 {
    font-weight: 500;
  }
}
/*------------------*/

/*トップセクション----------------------------------------*/
.top-wrapper {
  padding: 120px 0 237px;
}

.top-container {
  position: relative;
  display: flex;
  justify-content: end;
}

.mv-container {
  display: grid;
  grid-template: 70% 30%/ 1fr 1fr;
  gap: 10px;
  width: 70%;
  aspect-ratio: 3/ 2;
  margin: 0 49px;
}

.top-pic {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-1 {
  grid-row: 1/ 3;
}

.catch-copy {
  position: absolute;
  top: 20%;
  left: 49px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: bold;

  span {
    align-self: start;
  }
}

.catch-copy-red {
  display: inline-block;
  padding: 7px;
  color: white;
  font-size: 50px;
  background: linear-gradient(90deg, #8e1728, #de2b3e);
}

.catch-copy-white {
  font-size: 70px;
  background: #fff;
}

/*研究会について-----------------------------------------*/
.about-container {
  position: relative;
  margin-bottom: 280px;
  padding: 74px 100px;
  border-radius: 20px;
  overflow: hidden;
}

.about-contents {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template: auto auto auto/ 1fr 1fr;
  gap: 65px 55px;
}

.about-pic {
  grid-row: 1/ 4;
  grid-column: 2;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

/*事業化ワークショップ------------------------------------*/
.workshop-wrapper {
  position: relative;
  padding: 462px 0 110px;
  overflow: hidden;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 200px;
    background: #fff;
  }
  
  &::after {
    position: absolute;
    z-index: -1;
    bottom: 110px;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
  }
}

.workshop-container {
  position: relative;

  &::after {
    position: absolute;
    left: calc(50% - 800px);
    bottom: -110px;
    content: '';
    display: block;
    height: 110px;
    width: 1600px;
    background: #f0f0f0;
    clip-path: shape(
      from 0 0,
      curve to 100% 0 with 50% 220px,
    );
  }
}

.slider {
  position: absolute;
  z-index: 10;
  top: -462px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 65px;
  width: 1600px;

  img {
    width: 458px;
    height: 387px;
    border-radius: 20px;
    object-fit: cover;
  }
}

.workshop-contents {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 65px;
  max-width: 790px;
  margin: auto;
}

/*お知らせ-----------------------------------------------*/
.news-wrapper {
  padding: 168px 0;
}

.news-contents {
  display: grid;
  grid-template: auto auto/ 1fr 4fr;
  gap: 49px;
  max-width: 1302px;
  margin: auto;
}

.news-title {
  grid-row: 1/ 3;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-list-a {
  padding: 24px 20px;
  border-radius: 20px;
  box-shadow: 4px 4px 20px #a6a7a773;
  background: #fff;
}

/*イベントカード------------------------------------------*/
.event-wrapper {
  position: relative;
  padding-top: 238px;
  overflow: hidden;

  &::before {
    position: absolute;
    top: 0;
    left: calc(50% - 800px);
    content: '';
    display: block;
    width: 1600px;
    height: 238px;
    border-radius: 50% 50% 0 0;
    background: #f0f0f0;
    clip-path: shape(
      from 100% 100%,
      curve to 0 100% with 50% -238px,
    );
  }

  &::after {
    position: absolute;
    z-index: -1;
    top: 238px;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
  }
}

.event-contents {
  display: flex;
  justify-content: center;
  gap: 50px;
  padding-bottom: 205px;
}

.event-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 35px;
  max-width: 690px;
  min-width: 400px;
  padding: 50px 46px;
  border-radius: 20px;
  background: #fff;
  overflow: auto;
}

.card-pic {
  width: 592px;
  height: 203px;
  border-radius: 10px;
  object-fit: cover;
}

.event-list-div {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #a6a7a7;
}

.event-list li:last-child {
  & .event-list-div {
    margin: 0;
  }
}

.post-none {
  margin: 0
}

/*入会について-------------------------------------------*/
.entry-wrapper {
  position: relative;
  margin-bottom: 205px;
  overflow: hidden;

  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 50%;
    background: #fff;
  }
}

.entry-container {
  position: relative;
  z-index: 10;
  padding: 100px 63px;
  max-width: 1423px;
  border-radius: 20px;
  background: #d9d9d9;
  overflow: hidden;

  &::before, &::after {
    position: absolute;
    content: '';
    display: block;
    width: 1205px;
    height: 903px;
    background-image: url(../img/entry-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(4px);
    opacity: .3;
  }

  &::before {
    top: -150px;
    left: -591px;
    rotate: 107deg;
  }

  &::after {
    bottom: -308px;
    right: -385px;
    rotate: -68deg;
  }
}

.entry-contents {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template: auto auto/ auto 200px;
  gap: 42px;
  padding: 75px 62px;
  border-radius: 20px;
  background: #ffffff99;
  backdrop-filter: blur(8px);
}

.btn-wrap-entry {
  grid-row: 1/ 3;
  grid-column: 2;
}

.link-btn-entry {
  width: 200px;
  height: 200px;
  border-radius: 50%;

  &::before {
    border-radius: 50%;
  }
}

/* 以下　スマホ版css ================================================================================================*/
@media (max-width: 768px) {
  /*スマホ　共通-------------------------------------------*/
  /*スマホ　背景文字*/
  .bg-text {
    font-size: 99px;
  }

  .bg-text-about {
    top:-45px;
  }

  .bg-text-workshop {
    top: -85px;
  }

  /*スマホ　トップセクション--------------------------------*/
  .top-wrapper {
    padding: 68px 10px 0 10px;
  }

  .top-container {
    flex-direction: column;
    gap: 8px;
  }

  .mv-container{
    grid-template-rows: 4fr 3fr;
    margin: 0;
    width: 100%;
    height: 40vh;
  }

  .catch-copy {
    position: relative;
    top: -85px;
    left: 0;
  }

  .top-pic {
    border-radius: 10px;
  }

  .catch-copy-red {
    font-size: 25px;
  }

  .catch-copy-white {
    font-size: 32px;
  }
  /*------------------*/

  /*スマホ　研究会について----------------------------------*/
  .about-wrapper {
    margin: 0 10px;
  }

  .about-container {
    margin-bottom: 100px;
    padding: 50px 20px;
  }

  .about-contents {
    grid-template: auto/ auto;
    gap: 36px;
  }

  .about-pic {
    grid-row: 3;
    grid-column: auto;
    height: 267px;
  }

  /*スマホ　事業化ワークショップ----------------------------*/
  .workshop-wrapper {
    padding: 307px 0 74px;

    &::before {
      height: 130px;
    }
    
    &::after {
      bottom: 74px;
    }
  }

  .workshop-container {
    &::after {
      bottom: -74px;
      height: 74px;
      width: 768px;
      left: calc(50% - 384px);
      clip-path: shape(
        from 0 0,
        curve to 100% 0 with 50% 148px,
      );
    }
  }

  /*スライダー*/
  @keyframes scroll {
    from {
      translate: 0;
    }

    to {
      translate: -1065px;
    }
  }

  .slider {
    top: -307px;
    left: 20px;
    justify-content: start;
    gap: 48px;
    width: 2178px;
    animation: scroll 30s linear infinite;

    img {
      width: 323px;
      height: 267px;
    }
  }
  /*------------------------------------------------------*/

  .workshop-contents {
    gap: 36px;
    margin: 0 20px;
  }

  /*スマホ　お知らせ---------------------------------------*/
  .news-wrapper {
    padding: 100px 0 110px;
  }

  .news-contents {
    grid-template: auto/ auto;
    gap: 40px;
    margin: 0 20px;
  }

  .news-list-a {
    padding: 20px 14px;
  }

  /*スマホ　イベントカード----------------------------------*/
  .event-wrapper {
    padding-top: 64px;

    &::before {
      left: calc(50% - 384px);  
      height: 64px;
      width: 768px;
      clip-path: shape(
        from 100% 100%,
        curve to 0 100% with 50% -64px,
      );
    }

    &::after{
      top: 64px
    }
  }

  .event-contents {
    flex-direction: column;
    padding-bottom: 100px;
  }

  .event-card {
    min-width: 100%;
    padding: 50px 20px;
  }

  .card-pic {
    max-width: 314px;
    height: 128px;
    margin: auto;
  }

  /*スマホ　入会について------------------------------------*/
  .entry-wrapper {
    margin-bottom: 100px;

    &::before {
      left: calc(50% - 384px);
      width: 768px;
    }
  }

  .entry-container {
    padding: 50px 10px;

      &::before {
        content: '';
        top: 0;
        left: -110px;
        width: 290px;
        height: 217px;
        object-fit: cover;
      }

      &::after {
        right: -110px;
        bottom: -50px;
        width: 418px;
        height: 313px;
      }
  }

  .entry-contents {
    grid-template: auto/ auto;
    gap: 40px;
    padding: 40px 20px;
  }

  .btn-wrap-entry {
    justify-content: center;
    grid-row: 3;
    grid-column: 1;
  }

  .link-btn-entry {
    width: 124px;
    height: 124px;
    gap: 8px;
    padding: 0;

    .span-icon {
      width: 23px;
      height: 23px;
    }
  }
}