@keyframes iconmove{
  0%{
    transform: translateX(-10px);
  }
  100%{
    transform: translateX(10px);
  }
}
#banner
{
  text-align: center;
  article
  {
    div
    {
      padding:56px 24px 72px 24px;
      h2
      {
        font-size: 32px;
        line-height: 40px; /* 125% */
        letter-spacing: 1.28px;
        margin-bottom:24px;
        a
        {
          transition-duration:.5s;
          &:hover
          {
            color:$main-color;
          }
        }
      }
      p
      {
        margin-bottom:24px;
      }
      i
      {
        font-size:20px;
        cursor: pointer;
        display: block;
        animation:.5s;
        &:hover
        {
          color:$main-color;
          
        }
      }
      &:hover
      {
        i
        {
          animation:iconmove infinite 1s;
        }
      }
    }
    picture
    {
      display: block;
      width: 100%;
      img
      {
        display: block;
        width: 100%;
      }
    }
  }
}


#news
{
  padding-top:88px;
  padding-bottom:88px;

  h2
  {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px; /* 125% */
    letter-spacing: 0.96px;
    text-align: center;
    margin-bottom:32px;
    a
    {
      transition-duration:.5s;
      &:hover
      {
        color:$main-color;
      }
    }
  }

  ul
  {
    li
    {
      border-bottom:1px solid #A3A3A3;
      a
      {
        position: relative;
        time
        {
          color:#A3A3A3;
          display: block;
          font-size: 14px;
          line-height: 18px;
          letter-spacing: 0.56px;
          padding-bottom:6px;
          padding-top:6px;
        }
        span
        {   

          transition-duration:.5s;
        }
        i
        {
          width: 20px;
          position: absolute;
          right:0;
          bottom:0;
        }
        &:hover
        {
          span
          {
            color:$main-color;
          }
          i
          {
            animation:iconmove infinite 1s;
          }
        }
      }
    }
  }
  @media(min-width:768px)
  {
    ul
    {
      li
      {
        margin-bottom:6px;
        a
        {
          /*
          display: flex;
          flex-wrap:wrap;
          */
          width: 100%;
          align-items:center;
          span
          {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
//            flex:1;
            display: block;
            width: 100%;
            margin-right:0;
          }
        }
        &:last-child
        {
          margin-bottom:0;
        }
      }
    }
  }
  @media(min-width:588px)
  {
    padding-left:calc(50% - 270px);
    padding-right:calc(50% - 270px);
  }
  @media(max-width:767px)
  {
    padding-top:40px;
    padding-bottom:40px;
    h2
    {
      margin-bottom:24px;
    }
    ul
    {
      li
      {
        margin-bottom:24px;
        a
        {
          display: block;
          padding-bottom:24px;
          time
          {
            display: block;
            margin-bottom: 8px;
          }
          span
          {
            display: block;
            margin-bottom: 16px;
          }
          i
          {
            display: block;
          }
        }
        &:last-child
        {
          margin-bottom:0;
        }
      }
    }
  }
  @media(max-width:587px)
  {
    padding-left:24px;
    padding-right:24px;
  }

  
}

#product-list
{
  background-color: #F7F7F7;
  padding-top:88px;
  padding-bottom:88px;
  h2
  {
    text-align: center;
    margin-bottom: 88px;
    a
    {
      font-size: 28px;
      line-height: 36px;
      letter-spacing: 1.12px;
      transition-duration:.5s;
      &:hover
      {
        color:$main-color;
      }
    }
  }
  .article-list
  {
    display: flex;
    flex-wrap:wrap;
    article
    {
      width: 250px;
      margin-left:calc((100% - 1000px) / 6);
      margin-right:calc((100% - 1000px) / 6);
      margin-bottom:calc((100% - 1000px) / 6);
      &:nth-child(4n)
      {
        margin-right:0;
      }
      &:nth-child(4n + 1)
      {
        margin-left: 0;
      }

      picture
      {
        display: block;
        width: 100%;
        padding-top:100%;
        position: relative;
        margin-bottom:24px;
        overflow: hidden;
        img
        {
          transition-duration:.5s;
          position: absolute;
          top:0px;
          left:0px;
          display: block;
          width: 100%;
          height:100%;
          object-fit: cover;
        }
        &:hover
        {
          img
          {
            transform: scale(1.1);
          }
        }
      }
      .group
      {
        margin-bottom:4px;
        a
        {
          transition-duration:.5s;
          &:hover
          {
            color:$main-color;
          }
        }
      }
      h3
      {
        margin-bottom:8px;
        a
        {
          font-size: 18px;
          line-height: 24px; /* 133.333% */
          letter-spacing: 0.72px;
          transition-duration:.5s;
          &:hover
          {
            color:$main-color;
          }
        }
      }
      .price
      {
        color:$price-color;
      }
    }
  }
  .more
  {
    display: flex;
    justify-content:center;
    span
    {
      cursor: pointer;
      font-size: 14px;
      line-height: 18px; /* 128.571% */
      letter-spacing: 0.56px;
      padding:14px 32px;
      transition-duration:.5s;
      border-radius: 100px;
      border:1px solid $text-color;
      &:hover
      {
        color:#fff;
        background-color: $text-color;
      }
    }
  }
  @media(max-width:1200px)
  {
    .article-list
    {
      article
      {
        width: calc((100% - 120px) / 4);
        margin:0 20px 40px 20px;
      }
    }
  }
  @media(max-width:980px)
  {
    .article-list
    {
      article
      {
        width: calc((100% - 60px) / 4);
        margin:0 10px 40px 10px;
      }
    }
  }
  @media(max-width:767px)
  {
    padding-top:40px;
    padding-bottom:40px;
    h2
    {
      margin-bottom:40px;
    }
    .article-list
    {
      article
      {
        width: calc(50% - 16px);
        margin:0 16px 32px 16px;
        &:nth-child(2n)
        {
          margin-right:0;
        }
        &:nth-child(2n + 1)
        {
          margin-left: 0;
        }
        picture
        {
          margin-bottom: 16px;
        }
      }
    }
  }
}

#service
{
  padding-top:120px;
  ul
  {
    max-width: 770px;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    padding-bottom:120px;
    li
    {
      width: 150px;
      margin-left:calc((100% - 450px) / 4);
      margin-right:calc((100% - 450px) / 4);
      margin-bottom:60px;
      &:nth-child(3n)
      {
        margin-right:0;
      }
      &:nth-child(3n + 1)
      {
        margin-left: 0;
      }
      a
      {
        display: block;
        text-align: center;
        i
        {
          margin-bottom: 16px;
          display: block;
          width: 150px;
          height: 150px;
          border-radius: 100%;
          background-color: #F7F7F7;
          text-align: center;
          line-height: 150px;
          font-size:70px;
          transition-duration:.5s;
        }
        span
        {
          transition-duration:.5s;
          font-size: 14px;
          line-height: 18px; /* 128.571% */
          letter-spacing: 0.56px;
        }
        &:hover
        {
          i
          {
            transform: scale(1.1);
          }
          span
          {
            color:$main-color;
          }
        }
      }
      
    }
  }
  h2
  {
    text-align: center;
    margin-bottom: 88px;
    a
    {
      transition-duration:.5s;
      font-size: 28px;
      line-height: 36px;
      letter-spacing: 1.12px;
      &:hover
      {
        color:$main-color;
      }
    }
  }
  picture
  {
    position: relative;
    display: block;
    img
    {
      display: block;
      position: relative;
      z-index: 1;
      width: 100%;
    }
    
    &::after
    {
      content:' ';
      width: 100%;
      height: 50%;
      position: absolute;
      bottom:0;
      left:0;
      background-color: #F7F7F7;
    }
  }
  p
  {
    background-color: #F7F7F7;
    padding:88px 24px 56px 24px;
    @media(min-width:588px)
    {
      padding-left:calc(50% - 270px);
      padding-right:calc(50% - 270px)
    }
  }
  .more
  {
    background-color: #F7F7F7;
    display: flex;
    justify-content:center;
    padding-bottom:88px;
    span
    {
      cursor: pointer;
      font-size: 14px;
      line-height: 18px; /* 128.571% */
      letter-spacing: 0.56px;
      padding:14px 32px;
      transition-duration:.5s;
      border-radius: 100px;
      border:1px solid $text-color;
      &:hover
      {
        color:#fff;
        background-color: $text-color;
      }
    }
  }

  @media(max-width:767px)
  {
    ul
    {
      li
      {
        a
        {
          i
          {
            width: 64px;
            height: 64px;
            line-height: 64px;
            margin-left:auto;
            margin-right:auto;
            font-size:30px;
          }
          span
          {
            font-size: 15px;
            line-height: 22px; /* 146.667% */
            letter-spacing: 0.6px;
          }
        }
        
      }
    }
  }
  
}


#activity
{
  padding-top:88px;
  padding-bottom:88px;
  h2
  {
    text-align: center;
    margin-bottom:88px;
    a
    {
      font-size: 28px;
      line-height: 36px;
      letter-spacing: 1.12px;
      transition-duration:.5s;
      &:hover
      {
        color:$main-color;
      }
    }
  }

  .article-list
  {
    article
    {
      margin-bottom: 88px;
      span
      {
        color:#C30D23;
        display: block;
        margin-bottom:8px;
      }
      h3
      {
        font-size: 24px;
        line-height: 30px;
        letter-spacing: 0.96px;
        margin-bottom:48px;
      }
      picture
      {
        display: block;
        img
        {
          display: block;
          width: 100%;
        }
      }
    }
    
  }
  .more
  {
    display: flex;
    justify-content:center;
    span
    {
      cursor: pointer;
      font-size: 14px;
      line-height: 18px; /* 128.571% */
      letter-spacing: 0.56px;
      padding:14px 32px;
      transition-duration:.5s;
      border-radius: 100px;
      border:1px solid $text-color;
      &:hover
      {
        color:#fff;
        background-color: $text-color;
      }
    }
  }

  @media(min-width:768px)
  {
    
    .article-list
    {
      article
      {

        display: flex;
        flex-wrap:wrap;
        picture
        {
          width: 57.7%;
        }
        >div
        {
          flex:1;
          margin-left:4.8%;
        }
        &:nth-child(odd)
        {
          picture
          {
            order:1;
          }
          >div
          {
            order:0;            
            margin-left:0;
            margin-right:4.8%;
          }
        }
      }
    }
      
  }
  @media(max-width:767px)
  {
    padding-top:40px;
    padding-bottom:40px;
    h2
    {
      margin-bottom:40px;
    }
    .article-list
    {
      article
      {
        margin-bottom:40px;
        picture
        {
          width: 100%;
          margin-bottom:24px;
        }
        div
        {
          margin-bottom:40px;
        }
      }
    }
  }
}