.heroSection {
  position: relative;
  height: 100dvh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #fefefe 0%, #f8fff8 50%, #f0fdf4 100%);
  overflow: hidden;

  > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .heroContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    align-items: center;
    position: relative;
    z-index: 2;

    .heroContent {
      width: 65%;
      justify-self: end;
      .heroTitle {
        font-family: "Klee One", "Zen Antique Soft", "Noto Serif JP", serif;
        font-weight: 600;
        color: #fbfbfb;
        text-shadow: 0 3px 6px oklch(0.3211 0 0);
        margin-bottom: 24px;
        letter-spacing: 0.05em;

        .titleMain {
          display: block;
          font-size: clamp(1.5rem, 1.1rem + 2vw, 3.5rem);
          line-height: 1.2;
          margin-bottom: 8px;
          font-weight: 600;
        }

        .titleSub {
          display: block;
          font-size: clamp(1.5rem, 1.1rem + 2vw, 3.5rem);
          line-height: 1.3;
          color: #fbfbfb;
          font-weight: 600;
        }
      }

      .heroDescription {
        font-family: "Klee One", "Zen Antique Soft", "Noto Serif JP", serif;
        font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
        color: #374151;
        margin-bottom: 40px;
        line-height: 1.4;
        font-weight: 400;
        letter-spacing: 0.02em;
        background: rgba(255, 255, 255, 0.7);
        padding: 20px;
        border-radius: 12px;
        border-left: 4px solid #22c55e;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        > span {
          display: inline-block;
        }
        > .onSale {
          font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
          font-weight: bold;
        }
      }

      .heroButtons {
        display: flex;
        justify-content: center;
        gap: 20px;

        .ctaButton {
          padding: 16px 32px;
          border-radius: 30px;
          font-weight: 600;
          font-size: 1rem;
          transition: all 0.3s ease;
          display: inline-block;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

          &.primary {
            background: linear-gradient(135deg, #16a34a, #22c55e);
            color: var(--theme-white);
            position: relative;
            overflow: hidden;

            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
              );
              transition: left 0.5s ease;
            }

            &:hover {
              transform: translateY(-3px);
              box-shadow: 0 12px 30px rgba(22, 163, 74, 0.4);

              &::before {
                left: 100%;
              }
            }
          }

          &.secondary {
            background: var(--theme-white);
            color: #16a34a;
            border: 2px solid #16a34a;

            &:hover {
              background-color: #16a34a;
              color: var(--theme-white);
              transform: translateY(-3px);
              box-shadow: 0 12px 30px rgba(22, 163, 74, 0.3);
            }
          }
        }
      }
    }
  }
}

/* ===== アバウトセクション ===== */
.aboutSection {
  padding: 100px 0;
  background: linear-gradient(
    180deg,
    var(--theme-white) 0%,
    #fefefe 50%,
    #f9fafb 100%
  );

  .aboutGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;

    .aboutCard {
      background: var(--theme-white);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      border: 1px solid rgba(34, 197, 94, 0.1);

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
        border-color: rgba(34, 197, 94, 0.2);
      }

      .cardFigure {
        position: relative;
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            135deg,
            rgba(22, 163, 74, 0.05),
            transparent 50%
          );
          z-index: 1;
        }

        .cardImage {
          width: 100%;
          height: auto;
          transition: transform 0.5s ease;
          filter: brightness(1.02) saturate(1.1);
        }

        &:hover .cardImage {
          transform: scale(1.1);
          filter: brightness(1.05) saturate(1.2);
        }

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 60px;
          background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
          z-index: 2;
        }
      }

      .cardContent {
        padding: 30px;
        position: relative;

        .cardTitle {
          font-family: "Klee One", "Zen Antique Soft", "Noto Serif JP", serif;
          font-size: 1.4rem;
          font-weight: 600;
          color: #166534;
          margin-bottom: 16px;
          position: relative;
          letter-spacing: 0.02em;

          &::after {
            content: "";
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 30px;
            height: 2px;
            background: linear-gradient(90deg, #22c55e, #16a34a);
            border-radius: 1px;
          }
        }

        .cardDescription {
          color: #4b5563;
          line-height: 1.7;
          font-weight: 300;
        }
      }
    }
  }
}

/* ===== 商品セクション ===== */
.productsSection {
  padding: 100px 0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
        circle at 20% 20%,
        rgba(34, 197, 94, 0.03) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 80%,
        rgba(16, 185, 129, 0.03) 0%,
        transparent 50%
      );
  }

  .sectionHeaderNotice {
    color: oklch(0.6579 0.2284 26.18);
    text-align: center;
    font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
  }

  .productsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 1;

    .productCard {
      background: var(--theme-white);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
      transition: all 0.3s ease;
      position: relative;
      border: 2px solid rgba(34, 197, 94, 0.1);

      &.premium {
        border: 3px solid #f59e0b;
        background: linear-gradient(
          135deg,
          #fffbeb 0%,
          var(--theme-white) 100%
        );

        .productBadge {
          position: absolute;
          top: 20px;
          right: 20px;
          background: linear-gradient(135deg, #f59e0b, #fbbf24);
          color: var(--theme-white);
          padding: 8px 16px;
          border-radius: 20px;
          font-size: 0.9rem;
          font-weight: 600;
          z-index: 2;
          box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
        }
      }

      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
        border-color: rgba(34, 197, 94, 0.3);
      }

      .productFigure {
        position: relative;
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            135deg,
            rgba(22, 163, 74, 0.05),
            transparent 60%
          );
          z-index: 1;
        }

        .productImage {
          width: 100%;
          height: auto;
          transition: transform 0.5s ease;
          filter: brightness(1.05) saturate(1.15);
        }

        &:hover .productImage {
          transform: scale(1.1);
          filter: brightness(1.1) saturate(1.25);
        }
      }

      .productContent {
        padding: 32px;
        background: linear-gradient(
          180deg,
          var(--theme-white) 0%,
          #fefefe 100%
        );

        .productTitle {
          font-family: "Klee One", "Zen Antique Soft", "Noto Serif JP", serif;
          font-size: 1.6rem;
          font-weight: 600;
          color: #166534;
          margin-bottom: 8px;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          letter-spacing: 0.02em;
        }

        .productWeight {
          font-size: 1.1rem;
          color: #22c55e;
          font-weight: 600;
          margin-bottom: 16px;
          background: rgba(34, 197, 94, 0.1);
          padding: 4px 12px;
          border-radius: 12px;
          display: inline-block;
        }

        .productDescription {
          color: #4b5563;
          line-height: 1.7;
          margin-bottom: 24px;
          font-weight: 300;
        }

        .productPrice {
          margin-bottom: 24px;
          padding: 16px;
          background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
          border-radius: 12px;
          border-left: 4px solid #22c55e;

          .priceValue {
            font-size: clamp(1.75rem, 1.7rem + 0.25vw, 2rem);
            font-weight: 700;
            color: #166534;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          }

          .priceUnit {
            font-size: 1rem;
            color: #6b7280;
            margin-left: 4px;
          }
        }

        .productBtn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          background: linear-gradient(135deg, #16a34a, #22c55e);
          color: var(--theme-white);
          padding: 16px 24px;
          border-radius: 12px;
          font-weight: 600;
          font-size: 1.1rem;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;

          > img {
            width: 10%;
            aspect-ratio: 1/1;
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              90deg,
              transparent,
              rgba(255, 255, 255, 0.2),
              transparent
            );
            transition: left 0.5s ease;
          }

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(22, 163, 74, 0.4);

            &::before {
              left: 100%;
            }
          }
        }
      }
    }
  }
}

/* ===== 生産者セクション ===== */
.producerSection {
  padding: 100px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);

  .producerContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;

    .producerText {
      .sectionHeader {
        text-align: left;
        margin-bottom: 40px;
      }

      .producerInfo {
        .producerName {
          font-family: "Klee One", "Zen Antique Soft", "Noto Serif JP", serif;
          font-size: 1.6rem;
          font-weight: 600;
          color: #166534;
          margin-bottom: 16px;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          letter-spacing: 0.02em;
        }

        .farmInfo {
          margin-bottom: 32px;

          .farmSize {
            font-size: 1.1rem;
            color: #22c55e;
            font-weight: 500;
            background: rgba(34, 197, 94, 0.1);
            padding: 8px 16px;
            border-radius: 20px;
            display: inline-block;
          }
        }

        .producerMessage {
          font-size: 1.1rem;
          line-height: 1.8;
          color: #374151;
          font-style: italic;
          border-left: 4px solid #22c55e;
          padding: 24px;
          font-weight: 300;
          background: linear-gradient(
            135deg,
            rgba(34, 197, 94, 0.05),
            rgba(255, 255, 255, 0.8)
          );
          border-radius: 0 12px 12px 0;
          position: relative;

          &::before {
            content: '"';
            position: absolute;
            top: 10px;
            left: -8px;
            font-size: 3rem;
            color: #22c55e;
            font-family: serif;
            line-height: 1;
          }
        }
      }
    }

    .producerImageWrapper {
      .producerFigure {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
        position: relative;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            135deg,
            rgba(22, 163, 74, 0.08),
            transparent 60%
          );
          z-index: 1;
        }

        .producerImage {
          width: 100%;
          height: auto;
          transition: transform 0.5s ease;
          filter: brightness(1.02) saturate(1.05);
        }

        &:hover .producerImage {
          transform: scale(1.05);
          filter: brightness(1.05) saturate(1.1);
        }
      }
    }
  }
}

/* ===== 購入セクション ===== */
.purchaseSection {
  padding: 100px 0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
        circle at 30% 30%,
        rgba(34, 197, 94, 0.03) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 70% 70%,
        rgba(16, 185, 129, 0.03) 0%,
        transparent 50%
      );
  }

  .purchaseContent {
    text-align: center;
    position: relative;
    z-index: 1;

    .purchaseInfo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      margin: 60px 0;

      .deliveryInfo,
      .paymentInfo {
        background: var(--theme-white);
        padding: 40px;
        border-radius: 16px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(34, 197, 94, 0.1);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
          border-color: rgba(34, 197, 94, 0.2);
        }

        .infoTitle {
          font-family: "Noto Serif JP", serif;
          font-size: 1.4rem;
          font-weight: 600;
          color: #166534;
          margin-bottom: 24px;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 2px;
            background: linear-gradient(90deg, #22c55e, #16a34a);
            border-radius: 1px;
          }
        }

        .infoList {
          text-align: left;

          li {
            padding: 8px 0;
            color: #4b5563;
            font-weight: 300;
            position: relative;
            padding-left: 24px;

            &::before {
              content: "✓";
              position: absolute;
              left: 0;
              color: #22c55e;
              font-weight: 600;
              font-size: 1.1rem;
            }
          }
        }
      }
    }

    .contactInfo {
      background: var(--theme-white);
      padding: 40px;
      border-radius: 16px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
      display: inline-block;
      border: 2px solid rgba(34, 197, 94, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        border-color: rgba(34, 197, 94, 0.3);
      }

      .contactTitle {
        font-family: "Noto Serif JP", serif;
        font-size: 1.4rem;
        font-weight: 600;
        color: #166534;
        margin-bottom: 16px;
      }

      .contactEmail {
        font-size: 1.8rem;
        font-weight: 700;
        color: #16a34a;
        margin-bottom: 8px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }

      .contactHours {
        color: #6b7280;
        font-weight: 300;
      }
    }
  }
}

/* ===== レスポンシブ（メイン） ===== */
@media (width < 768px) {
  .heroSection {
    height: calc(100dvh - 70px);
    > img {
      object-position: 40% center;
    }
    .heroContainer {
      padding: 0 12px;
      text-align: center;
      .heroContent {
        width: 100%;
        display: grid;
        gap: 16px 0;
        .heroTitle,
        .heroDescription {
          margin-bottom: 0;
        }
        .heroTitle {
          .titleMain {
            margin-bottom: 0;
          }
        }
        .heroDescription {
          padding: 12px;
        }
        .heroButtons {
          flex-direction: column;
          align-items: center;
          gap: 8px;
          .ctaButton {
            width: 100%;
            max-width: 280px;
            padding: 12px 24px;
          }
        }
      }
    }
  }

  .aboutSection {
    padding: 60px 0;
    .aboutGrid {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  }

  .productsSection {
    padding: 60px 0;
    .sectionHeaderNotice {
      margin-bottom: 1rem;
    }
    .productsGrid {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  }

  .producerSection {
    padding: 60px 0;
    .producerContent {
      grid-template-columns: 1fr;
      gap: 40px;
      .producerText {
        .sectionHeader {
          text-align: center;
        }
      }
    }
  }

  .purchaseSection {
    padding: 60px 0;
    .purchaseContent {
      .purchaseInfo {
        grid-template-columns: 1fr;
        gap: 30px;
      }
    }
  }
}