#slider {
  position: relative;
  width: 100%;
  height: 600px;

  .slide{
    width: 100%;
    height: 100%;
    position: relative;
  }

  .slide-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .slide-info{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    max-width: 1200px;
    padding: 70px 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .slide1{
    background:url(/images/index/slide/1.png) no-repeat center center;
    background-size: cover;
    .slide-info{
      align-items: flex-start;
      gap:32px;
      color: #fff;

      ._text{
        strong{
          display: block;
          margin-bottom: 12px;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }

  .slick-dots{
    bottom: -30px;

    li{
      width: 10px;
      height: 10px;
    }

    button{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ccc;

      &::before{
        content: none;
      }
    }

    .slick-active button{
      background-color: var(--color-yellow);
    }
  }
}

@media only screen and (max-width: 800px) {
  #slider {
    .slide1{
      background-image:url(/images/index/slide/1_sp.png);
      .slide-info{
        padding: 24px 16px;
        justify-content: flex-end;
        gap:40px;

        img{
          width: 100%;
        }
      }
      ._text{
        font-size: 12px;
        strong{
          font-size: 16px;
        }
      }
    }

  }
}



/*
  News
*/
.section-news{
  .list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item{
      width: 320px;
    }

    ._image{
      width: 100%;
      aspect-ratio: 16/9;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    ._info{
      background:url(/images/bg-stripe.png) repeat;
      border-bottom: 4px solid var(--color-green);
      padding: 12px 16px;

      a{
        color: var(--color-green);
        text-decoration: none;
      }
    }
    ._date{
      font-size: 12px;
      font-family: "Century Gothic", sans-serif;
      color: #666;
    }
    ._title{
      font-size: 16px;
      font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      height: 39px;
      line-height: 1.2;
      margin-top:8px;
    }
    ._description{
      font-size: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      height: 64px;
      line-height: 1.6;
      margin-top:10px;
    }
    ._tags{
      display: flex;
      gap:16px;
      margin-top:16px;
      font-size: 11px;
      font-weight: bold;

      li{
        display: flex;
        align-items: center;
        gap:4px;
        &::before{
          content: "〇";
          color: var(--color-green);
          font-size: 12px;
          font-weight: 700;
        }
      }
    }
  }
}

@media only screen and (max-width: 800px) {
  .section-news {
    .list {
      flex-direction: column;
      gap:40px;

      .item{
        width: 100%;
      }
    }
  }
}



/*
  Teams
*/
.section-teams{
  .list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:40px;

    .item{
      width: 570px;
      display: flex;
      background:#fff;
    }

    ._image{
      display: flex;
      align-items: center;
      justify-content: center;
      padding:12px;

      img{
        width: 100px;
        height: 100px;
        object-fit: contain;
      }
    }
    ._info{
      padding: 12px 16px 12px 0;

      a{
        color: var(--color-green);
        text-decoration: none;
      }
    }
    ._date{
      font-size: 12px;
      font-family: "Century Gothic", sans-serif;
      color: #999;
    }
    ._title{
      font-size: 16px;
      font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      height: 17px;
      line-height: 1;
      margin-top:8px;
    }
    ._description{
      font-size: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      height: 64px;
      line-height: 1.6;
      margin-top:10px;
    }
  }

  .teams-link{
    margin-block:40px;
    display: grid;
    place-items: center;
  }

  .teams-about{
    max-width: 1000px;
    margin-inline: auto;
    background-color: #fff;
    padding:16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:16px;
    
    hgroup{
      display: flex;
      gap:16px;
      padding:4px 20px;
      background-color: var(--color-yellow);
      text-align: center;
      align-items: center;
      width:fit-content;

      h3{
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
      }
    }

    ._text{
      width:100%;
      margin-block:24px;
    }
    ._action{
      width:100%;
      display: grid;
      place-items: center;
    }
  }
}

@media only screen and (max-width: 800px) {
  .section-teams {
    .list {
      flex-direction: column;
      gap:40px;

      .item{
        width: 100%;
      }

      ._title{
        display: block;
        height: auto;
        line-height: 1.2;
      }
    }
    .teams-about{
      hgroup{
        flex-direction: column;
        width:100%;
        gap:4px;
      }
    }
  }
}

/*
  About
*/
.section-about{
  background: #fff url(/images/bg-about.webp) repeat 0 0;
  background-size: cover;

  .about-content{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width:1000px;
    margin-inline: auto;
    text-align: center;
    ._image{
      width: 360px;

      img{
        width: 100%;
      }
    }
    ._info{
      h3{
        font-size: 24px;
        font-weight: bold;
        line-height: 1.4;
      }
      ._text{
        margin-top:24px;
        font-size: 16px;
      }
    }
  }

  .about-link{
    margin-block:40px;
    display: grid;
    place-items: center;
  }
  
  .list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item{
      width: 320px;
      position: relative;
    }

    a:hover{
      opacity: 0.8;
    }

    ._image{
      width: 100%;
      aspect-ratio: 16/9;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    ._info{
      position: absolute;
      bottom:0;
      width:100%;
      background-color: rgba(17,169,82,0.8);
      color:#fff;
      text-align: center;
      padding: 4px 16px;
      h4{
        font-family: "Century Gothic", sans-serif;
        letter-spacing: 0.05em;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.6;
      }
      div{
        font-size: 14px;
        line-height: 1.6;
      }
    }
  }
}

@media only screen and (max-width: 800px) {
  .section-about {
    background-image: url(/images/bg-about_sp.webp);

    .about-content{
      flex-direction: column;
      gap:40px;
      ._image{
        width: 100%;
      }
      ._info{
        h3{
          font-size: 20px;
        }
      }
    }
    .list{
      flex-direction: column;
      gap:40px;
      .item{
        width: 100%;
      }
    }
  }
}


/*
  Rules
*/
.section-rules{
  .list{
    display: flex;
    flex-direction: column;
    gap:64px;

    .item{
      display: flex;
      gap:72px;

      ._image{
        width: 480px;
        img{
          max-width: 100%;
        }
      }

      ._info{
        flex:1;

        h3{
          display: flex;
          align-items: center;
          gap:12px;
          font-weight: bold;
        }
        ._text{
          margin-top:12px;
        }
      }
    }
  }

  ._link{
    margin-block:40px;
    display: grid;
    place-items: center;
  }
}

@media only screen and (max-width: 800px) {
  .section-rules {
    .list{
      gap:40px;
      .item{
        flex-direction: column;
        gap:20px;
        ._image{
          width: 100%;
        }
        ._info{
          width: 100%;
        }
      }
    }
  }
}


.section-shop{
  .shop-content{
    ._image{
      max-width: 100%;
      img{
        width: 100%;
      }
      picture{
        width: 100%;
      }
      text-align: center;
    }
    ._info{
      ._text{
        color:#fff;
        text-align: center;
        margin-top:12px;
      }
    }
  }
  ._link{
    margin-block:40px;
    display: grid;
    place-items: center;
  }
}