/* ------------------------------
   Global
------------------------------ */
body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #1b1f2a; /* 落ち着いたネイビーグレー */
  color: #e5e7eb;            /* 柔らかい白 */
  line-height: 1.8;
}

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

/* ------------------------------
   Header
------------------------------ */
.site-header {
  background: rgba(27, 31, 42, 0.9);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 0;
}

.logo {
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
}

.nav a {
  color: #e5e7eb;
  text-decoration: none;
  margin-left: 1.2em;
  font-weight: 500;
}

/* ------------------------------
   Hero Section
------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 6.5em 1em 5.5em;
  background:
    radial-gradient(circle at 15% 20%, rgba(239, 217, 171, 0.45), transparent 62%),
    radial-gradient(circle at 90% 18%, rgba(179, 205, 255, 0.32), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #f7f5f1 52%, #f0f4ff 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -25% -10%;
  background:
    radial-gradient(ellipse at 30% 65%, rgba(255, 255, 255, 0.45), transparent 70%),
    conic-gradient(from 120deg at 68% 32%, rgba(200, 168, 90, 0.28), transparent 68%),
    conic-gradient(from -30deg at 35% 70%, rgba(147, 197, 253, 0.26), transparent 55%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.25) 37%, transparent 70%),
    radial-gradient(circle at 50% 120%, rgba(200, 168, 90, 0.18), transparent 75%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  color: #1e2a34;
}
.catch {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.6;
  color: #1e2a34;
  margin-bottom: 0.7em;
}
.intro  {
  color: #4b5563;
  font-size: 1.15rem;
}

/* ------------------------------
   Section Common
------------------------------ */
.section { padding: 5em 1em; }
.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2em;
  color: #fff;
  border-bottom: 2px solid #c8a85a;
  display: inline-block;
  padding-bottom: 0.3em;
}

/* ------------------------------
   Greeting
------------------------------ */
.lead {
  font-size: 1rem;
  color: #d1d5db;
  line-height: 1.9;
  text-align: left;
}
.signature {
  margin-top: 1.8em;
  color: #e5e7eb;
  width: 100%;
  max-width: 720px;
  text-align: right;
  margin-left: auto;
}
.signature span {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.signature-name {
  margin-top: 0.4em;
}

/* ------------------------------
   商品紹介（静的・左右統一）
------------------------------ */
#products.section {
  background-color: #1e2a34;
  padding: 100px 20px;
  color: #fff;
}
#products .section-title {
  color: #fff;
  border-color: #c8a85a;
  font-size: 2rem;
  margin-bottom: 80px;
}

.product-grid {
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
}

/* --- 商品カード（動き無し）--- */
.product-card {
  display: flex;
  align-items: center;     /* 上下中央揃え */
  justify-content: center; /* 左右均等 */
  gap: 60px;
  background: #ffffff;
  color: #222;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  padding: 60px 70px;
  max-width: 1000px;
  width: 100%;
}

/* --- 画像 --- */
.product-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-image img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
}

/* --- テキスト --- */
.product-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦中央 */
  padding: 10px 30px;
}
.product-header { margin-bottom: 16px; }
.protein-highlight {
  background: linear-gradient(90deg, #f8e28b, #d4af37);
  color: #1e2a34;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 25px;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  align-self: flex-start;
}
.product-name  { font-size: 1.6rem; font-weight: 700; color: #1e2a34; margin-bottom: 8px; }
.catch-copy    { font-size: 1.1rem; color: #333; font-weight: 600; margin-bottom: 16px; }
.product-desc  { font-size: 1rem; color: #333; line-height: 1.9; }
.product-desc small { display: block; color: #777; font-size: 0.8rem; margin-top: 10px; }

/* --- ボタン（色のみ・アニメ無し）--- */
.product-btn {
  display: inline-block;
  margin-top: 24px;
  background: linear-gradient(90deg, #d4af37, #f8e28b);
  color: #1e2a34;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 30px;
  text-decoration: none;
}

/* ------------------------------
   Contact
------------------------------ */
.form-frame {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5em 2.25em;
  background: rgba(255,255,255,0.05);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(5, 10, 25, 0.5);
  border: 1px solid rgba(200, 200, 220, 0.12);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.form-frame iframe {
  display: block;
  width: 100%;
  border: none;
  height: clamp(620px, 82vh, 900px);
}

/* ------------------------------
   About (会社概要)
------------------------------ */
.company-table {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  overflow: hidden;
}
.company-table th {
  width: 25%;
  text-align: center;
  padding: 1.1em 1.5em;
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  font-weight: 600;
  white-space: nowrap;
}
.company-table td {
  padding: 1.1em 1.5em;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #d1d5db;
}
.company-table tr:first-child td { border-top: none; }
#about .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

/* ------------------------------
   Footer
------------------------------ */
footer {
  background: #151922;
  color: #a1a1aa;
  text-align: center;
  padding: 2em 0;
  font-size: 0.9rem;
}

/* ------------------------------
   Responsive Global
------------------------------ */
@media (max-width: 900px) {
  .product-card {
    flex-direction: column;
    text-align: center;
    padding: 40px 25px;
  }
  .product-image img { width: 100%; max-width: 100%; }
  .product-content { padding: 20px; align-items: center; }
  .product-btn { align-self: center; }
  #products .section-title { font-size: 1.6rem; margin-bottom: 60px; }
}
@media (max-width: 768px) {
  .catch { font-size: 1.6rem; }
  .intro { font-size: 1rem; }
  .nav a { margin-left: 0.8em; }
  .address-grid {
    grid-template-columns: 1fr;
    row-gap: 0.6em;
  }
}
/* ------------------------------
   Contact fine-tuning
------------------------------ */
#contact {
  background-color: #1b1f2a;
}
#contact .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5em;
}
#contact .section-title {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  #contact .container {
    gap: 2em;
  }
  .form-frame {
    padding: 1.8em 1.4em;
    border-radius: 14px;
    box-shadow: 0 16px 30px rgba(5, 10, 25, 0.55);
  }
  .form-frame iframe {
    height: clamp(640px, 95vh, 1080px);
  }
}