body {
    background-color: forestgreen;
  }
  
  h1, h2 {
    font-family: 'Poppins', sans-serif;
  }
  
  p {
    font-family: 'Noto Sans JP', sans-serif;
  }
  
  .container {
    margin: 0 auto;
    width: 80%;
    text-align: center;
  }

  .head-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 20px 0 0;
  }
  
  .head-nav li {
    list-style: none;
  }
  
  .nav-link {
    color: black;
    text-decoration: none;
  }
  
  .nav-link:hover {
    opacity: 0.7;
  }
  
  .clear {
    clear: both;
  }
  
  .detail-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }
  
  .detail-text {
    width: 60%;
    text-align: left;
  }
  
  .detail-image {
    width: 35%;
    text-align: right;
  }
  
  .detail-image img {
    max-width: 100%;
    height: auto;
  }
  
  /* Footer */
  footer {
    margin-top: 40px;
    padding: 20px 0;
  }
  
  .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: opacity 0.2s ease;
  }

  .social-link:hover {
    opacity: 0.7;
  }

  .social-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
  }
  
  @media(max-width: 670px) {
    .container {
      width: 90%;
    }

    .head-nav ul {
      gap: 12px;
      padding-top: 16px;
      flex-wrap: wrap;
    }
    .detail-container {
      flex-direction: column-reverse;
    }
    .detail-text, .detail-image {
      width: 100%;
      text-align: center;
    }
  }