/* AMD Japan AI Innovators Hub 固定ページ Styles */
#ai-community {
  color: #000;
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  background: #FFF;
  overflow-wrap: anywhere;

  .is-sp {
    display: none;
  }
  @media screen and (max-width: 768px){
    .is-sp {
      display: block;
    }
  }

  .is-pc {
    display: block;
  }
  @media screen and (max-width: 768px){
    .is-pc {
      display: none;
    }
  }

  .block {
    display: flex;
    width: 100%;
    padding: 70px 30px;
    justify-content: center;
    align-items: flex-start;
  }
  @media screen and (max-width: 768px){
    .block {
      padding: 50px 16px;
    }
  }

  .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 30px;

    .title {
      font-size: 36px;
      margin: 0 0 10px;
    }

    .description {
      color: #4D4D4D;
    }
  }
  @media screen and (max-width: 768px){
    .title-group {
      .title {
        font-size: 22px;
      }
  
      .description {
        font-size: 15px;
      }
    }
  }

  .kv {
    height: 480px;
    flex-direction: column;
    background: url('/wp-content/themes/amd_heroes/ai-community/img/ai-community-bg.png') #000;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #FFF;
    position: relative;

    .inner {
      z-index: 1;

      .title-group {
        margin: 0 0 40px;

        .subtitle {
          font-size: 20px;
          margin: 0 0 16px;
        }
  
        .title {
          font-size: 60px;
          line-height: 1.1;
          letter-spacing: 1.8px;
          margin: 0;
        }
      }

      .description-group {
        font-size: 16px;

        .description-group-item {
          margin: 0 0 1em;
        }

        .description-group-item:last-child {
          margin: 0;
        }
      }
    }
  }
  @media screen and (max-width: 768px){
    .kv {
      height: auto;
      display: flex;
      padding: 80px 20px 50px 20px;
  
      .inner {
        .title-group {
          margin: 0 0 30px;

          .subtitle {
            font-size: 16px;
            margin: 0 0 12px;
          }
    
          .title {
            font-size: 48px;
          }
        }
  
        .description-group {
          font-size: 14px;
        }
      }
    }
  }

  .kv::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(6, 3, 3, 0.4);
    position: absolute;
    top: 0;
    left: 0;
  }

  .ai-community-nav {
    height: 58px;
    background: #000;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .ai-community-nav-inner {
      display: flex;
      align-items: center;
      justify-content: center;

      .ai-community-list {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 58px;

        .ai-community-list-item{
          .ai-community-list-link {
            color: #fff;
            line-height: 1.2;
            position: relative;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .ai-community-list-link::after {
            border: 0;
            border-bottom: 2px solid #fff;
            content: "";
            display: block;
            margin: 0;
            position: absolute;
            left: 0;
            bottom: 0;
            transform: scaleX(0) translate(-50%, 0);
            transition: transform .25s ease-in-out;
            width: 100%;
          }
          
          .ai-community-list-link:hover::after {
            border-left: 0;
            border-right: 0;
            border-top: 0;
            outline: none;
            transform: scaleX(1);
          }
        }
      }
    }
  }
  @media screen and (max-width: 899px){
    .ai-community-nav {
      display: none;
    }
  }

  .ai-community-nav-sp-wrap {
    position: sticky;
    top: 0;
    display: none;
  }
  @media screen and (max-width: 899px){
    .ai-community-nav-sp-wrap {
      display: block;
    }
  }

  .ai-community-navbar {
    background: #000;
    padding: 16px;
    color: #fff;
    text-align: right;
    cursor: pointer;

    .ai-community-navbar-text {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .ai-community-navbar-text-item {
        margin: 0 8px 0 0;
      }

      .open-menu,
      .close-menu {
        display: none;
      }

      .open-menu.is-active {
        display: block;
        width: 16px;
        content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 512 512"><path d="m256 429.3 22.6-22.6 192-192 22.7-22.7-45.3-45.3-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192 22.7 22.7z"/></svg>');
      }

      .close-menu.is-active {
        display: block;
        width: 16px;
        content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 512 512"><path d="m256 429.3 22.6-22.6 192-192 22.7-22.7-45.3-45.3-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192 22.7 22.7z"/></svg>');
        transform: rotate(180deg);
      }
    }
  }

  .ai-community-nav-sp {
    background-color: #e1e1e2;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .24);
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height .5s ease-in-out;

    .ai-community-nav-sp-list {
      padding: 24px 0;

      .ai-community-nav-sp-list-item {
        margin: 0 0 16px;
        padding: 0 24px;
        text-align: right;
      }

      .ai-community-nav-sp-list-item:last-child {
        margin: 0;
      }
    }
  }

  .ai-community-nav-sp.is-active {
    display: none;
  }
  @media screen and (max-width: 899px){
    .ai-community-nav-sp.is-active {
      background-color: #e1e1e2;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .24);
      display: block !important;
      max-height: 65em;
      padding: 0;
      transition: max-height 1s ease-in-out;
    }
  }

  .innovation {
    flex-direction: column;
    background: #1A1A1B;
    color: #FFF;

    .inner {
      align-items: center;

      .title-group {
        align-items: center;
        margin: 0 0 60px;
  
        .title {
          text-align: center;
          font-size: 36px;
          margin: 0 0 30px;
        }
  
        .description {
          text-align: center;
          color: #FFF;
        }
      }

      .feature-list {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 30px;
        margin: 0 0 60px;

        .feature-list-item {
          width: calc((100% - 60px) / 3);
          display: flex;
          padding: 24px;
          justify-content: center;
          align-items: center;
          gap: 16px;
          border-top: 2px solid #007C97;
          background: #000;

          .number {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            line-height: 1;
          }

          .text {
            flex: 1 0 0;
            font-weight: bold;
            line-height: 1.25;
          }
        }
      }

      .button-link {
        display: flex;
        height: 56px;
        padding: 0px 24px;
        justify-content: center;
        align-items: center;
        border: 1px solid #FFF;
        background: #1A1A1B;
        color: #FFF;
        font-size: 20px;
        font-weight: bold;
        line-height: 1;
        transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
      }

      .button-link:hover {
        opacity: 0.5;
      }
    }
  }
  @media screen and (max-width: 999px){
    .innovation {
      .inner {
        .feature-list {
          .feature-list-item {
            .text {
              br {
                display: none;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px){
    .innovation {
      .inner {
        .title-group {
          margin: 0 0 40px;
    
          .title {
            font-size: 24px;
            margin: 0 0 30px;
          }
    
          .description {
            font-size: 15px;
            text-align: left;
          }
        }
        
        .feature-list {
          width: 100%;
          flex-direction: column;
          gap: 16px;
          margin: 0 0 40px;

          .feature-list-item {
            width: 100%;
            padding: 16px 12px;
            gap: 10px;

            .number {
              font-size: 32px;
            }

            .text {
              font-size: 15px;
              line-height: 1.5;

              br {
                display: inherit;
              }

              .is-pc {
                display: none;
              }

              .is-sp {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  .posts {
    .inner {
      .post-list {
        display: flex;
        width: 100%;
        align-items: flex-start;

        .post-list-item {
          display: flex;
          width: calc((100% - 16px) / 2);
          flex-direction: column;
          align-items: flex-start;
          margin: 0 16px 0 0;

          .post-link {
            width: 100%;

            .post-image {
              width: 100%;
              border-radius: 5px;
              margin: 0 0 10px;
            }
  
            .post-title {
              display: -webkit-box;
              line-clamp: 2;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
              font-weight: bold;
            }
          }
        }

        .post-list-item:last-child {
          margin: 0;
        }
      }
    }
  }
  @media screen and (max-width: 768px){
    .posts {
      .inner {
        .post-list {
          flex-wrap: wrap;

          .post-list-item {
            width: 100%;
            margin: 0 0 40px;
  
            .post-link {
              width: 100%;

              .post-title {
                font-size: 15px;
              }
            }
          }
        }
      }
    }
  }

  .products {
    .inner {
      .product-list {
        display: flex;
        width: 100%;
        align-items: flex-start;

        .product-list-item {
          display: flex;
          width: calc((100% - 32px) / 3);
          flex-direction: column;
          align-items: flex-start;
          margin: 0 16px 0 0;

          .product-link {
            width: 100%;

            .product-image {
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              align-self: stretch;
              border-radius: 5px;
              margin: 0 0 10px;
            }
  
            .product-title {
              display: -webkit-box;
              line-clamp: 2;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
              font-weight: bold;
            }
          }
        }

        .product-list-item:last-child {
          margin: 0;
        }
      }
    }
  }
  @media screen and (max-width: 768px){
    .products {
      .inner {
        .product-list {
          flex-wrap: wrap;

          .product-list-item {
            width: 100%;
            margin: 0 0 24px;
  
            .product-link {
              .product-title {
                font-size: 15px;
              }
            }
          }
        }
      }
    }
  }

  .partners {
    .inner {
      .partner-list {
        display: flex;
        width: 100%;
        align-items: flex-start;
        margin: 0 0 20px;

        .partner-list-item {
          display: flex;
          width: calc((100% - 16px) / 2);
          flex-direction: column;
          align-items: flex-start;
          margin: 0 16px 0 0;


          .partner-image {
            width: 100%;
            display: flex;
            height: 259px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            border-radius: 5px;
            margin: 0 0 10px;
            border: 1px solid rgba(0, 0, 0, 0.44);
            background: #FFF;

            .partner-image-item {
              max-width: 320px;
              max-height: 160px;
            }
          }

          .partner-title {
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            font-weight: bold;
            margin: 0 0 10px;
          }
        }

        .partner-list-item:last-child {
          margin: 0;
        }
      }

      .button-link-wrap {
        width: 100%;
        text-align: right;

        .button-link {
          font-size: 14px;
          line-height: 1;
          transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
        }

        .button-link:hover {
          opacity: 0.5;
        }
      }
    }
  }
  @media screen and (max-width: 768px){
    .partners {
      .inner {
        .partner-list {
          flex-wrap: wrap;

          .partner-list-item {
            width: 100%;
            margin: 0 0 24px;

            .partner-image {
              height: 168px;
              margin: 0 0 16px;
  
              .partner-image-item {
                max-width: 240px;
                max-height: 120px;
              }
            }
  
            .partner-title {
              font-size: 15px;
              margin: 0 0 4px;
            }

            .partner-description {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .contact {
    flex-direction: column;
    background: #1A1A1B;
    color: #FFF;
    text-align: center;

    .inner {
      align-items: center;

      .title-group {
        margin: 0 0 40px;
        align-items: center;
  
        .title {
          font-size: 36px;
          margin: 0 0 30px;
        }

        .description {
          color: #FFF;
        }
      }
  
      .button-link {
        display: flex;
        height: 56px;
        padding: 0px 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border: 1px solid #FFF;
        background: #1A1A1B;
        color: #FFF;
        font-size: 20px;
        font-weight: bold;
        line-height: 1;
        transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
      }
  
      .button-link:hover {
        opacity: 0.5;
      }
    }
  }
  @media screen and (max-width: 768px){
    .contact {
      .inner {
        .title-group {
          .title {
            font-size: 22px;
          }

          .description {
            font-size: 14px;
          }
        }
    
        .button-link {
          display: flex;
          height: 56px;
          padding: 0px 24px;
          justify-content: center;
          align-items: center;
          gap: 8px;
          border: 1px solid #FFF;
          background: #1A1A1B;
          color: #FFF;
          font-size: 20px;
          font-weight: bold;
          line-height: 1;
          transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
        }
    
        .button-link:hover {
          opacity: 0.5;
        }
      }
    }
  }
}