/* ===================================================
   下層ページ：霊芝について (#about)
=================================================== */
.site-header{
    background-color: rgba(57, 52, 44, 0.5);
    transition: background-color 0.3s ease;
    backdrop-filter: blur(5px);
}

.container2 {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ===================================================
   Eco-Pork風テーマ (.ep-theme)
=================================================== */
.ep-theme {
  --ep-bg: #f4f1ef;
  --ep-bg-light: #faf9f7;
  --ep-bg-gray: #f4f2ee;
  --ep-dark: #0f3c3c;
  --ep-green: #009b4a;
  --ep-text: #333333;
  
  background-color: var(--ep-bg);
  color: var(--ep-text);
  font-family: "Montserrat", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
  overflow-x: hidden;
}

/* 共通ユーティリティ */
.ep-theme .c-inner { width: 90vw; max-width: 1200px; margin: 0 auto; position: relative; }
.ep-theme .c-col { display: flex; align-items: center; justify-content: space-between; gap: 5vw; }
.ep-theme .c-col--reverse { flex-direction: row-reverse; }
.ep-theme .c-col__inner { width: 50%; }
.ep-theme .c-mb-15 { margin-bottom: 15px; }
.ep-theme .c-mb-20 { margin-bottom: 20px; }
.ep-theme .c-mb-30 { margin-bottom: 30px; }
.ep-theme .c-mb-40 { margin-bottom: 40px; }
.ep-theme .c-mb-60 { margin-bottom: 60px; }

/* タイポグラフィ */
.ep-theme .fs-ll { font-size: 2.8vw; line-height: 1.4; letter-spacing: 0.03em; }
.ep-theme .fs-xm { font-size: 24px; }
.ep-theme .fs-m { font-size: 16px; line-height: 1.8; letter-spacing: 0.05em; }
.ep-theme .fs-s { font-size: 14px; line-height: 1.7; letter-spacing: 0.05em; }
.ep-theme .fs-xs { font-size: 12px; line-height: 1.6; letter-spacing: 0.05em; }
.ep-theme .fw-m { font-weight: 600; }
.ep-theme .u-green-text { color: var(--ep-green); }
.ep-theme .u-deep-text { color: var(--ep-dark); }
.ep-theme .u-white-text { color: #fff; }
.ep-theme .u-bg-deep { background-color: var(--ep-dark); padding: 100px 0; }
.ep-theme .u-center { text-align: center; }

/* 見出しあしらい（緑のドット） */
.ep-theme .c-title-en {
  color: var(--ep-green);
  font-size: 18px;
  margin-bottom: 20px;
}
.ep-theme .c-sec__ttl-en {
  font-size: 2.5vw;
  font-weight: 600;
  color: var(--ep-dark);
  margin-bottom: 30px;
  position: relative;
  padding-left: 2.5vw;
}
.ep-theme .c-sec__ttl-en::before {
  content: "";
  display: block;
  width: 8px; height: 8px;
  background: var(--ep-green);
  border-radius: 50%;
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
}
.ep-theme .u-white-text.c-sec__ttl-en { color: #fff; }

/* Hero Section */
.p-sub-fv { padding-top: 150px; padding-bottom: 100px; }
.p-sub-fv__inner { display: flex; align-items: center; justify-content: space-between; }
.p-sub-fv__ttl { width: 45%; }
.p-sub-fv__ttl h3 { font-size: 3.8vw; line-height: 1.3; margin-bottom: 20px; color: var(--ep-dark); }
.p-sub-fv__lead { font-size: 16px; line-height: 1.8; margin-bottom: 40px; }
.p-sub-fv__img { width: 50%; height: 60vh; border-radius: 20px; overflow: hidden; }
.p-sub-fv__img img { width: 100%; height: 100%; object-fit: cover; }

/* スクロールボタン（丸） */
.c-scroll-btn {
  width: 80px; height: 80px;
  background: var(--ep-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px;
}

/* セクション共通 */
.p-section { padding: 100px 0; }
.p-radius-img { border-radius: 20px; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/3; }

/* ボックス（注釈や詳細） */
.p-box {
  background: var(--ep-bg-light);
  border-radius: 20px;
  padding: 40px;
  margin-top: 30px;
}
.p-box--dark {
  background: rgba(255,255,255,0.05);
}

/* カードスタイル（Products模倣） */
.p-products { background-color: var(--ep-bg-gray); padding: 120px 0; }
.p-products__lists {
  display: flex; flex-wrap: wrap; justify-content: space-between;
}
.p-products__list { width: 32%; margin-bottom: 40px; }
.p-products__img {
  border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; margin-bottom: 20px;
  background: #fff;
}
.p-products__img img { width: 100%; height: 100%; object-fit: cover; }
.p-products__name { color: var(--ep-dark); margin-bottom: 15px; }

/* リストあしらい（緑のドット） */
.p-list-dot li {
  position: relative; padding-left: 1em; margin-bottom: 10px;
}
.p-list-dot li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ep-green);
  position: absolute; left: 0; top: 0.8em;
}

/* ステップUI */
.p-steps { display: flex; flex-direction: column; gap: 20px; }
.p-step {
  display: flex; align-items: center; gap: 30px;
  background: #fff; padding: 30px; border-radius: 20px;
}
.p-step__num {
  font-family: "Montserrat", sans-serif; font-size: 40px; font-weight: 600; color: var(--ep-green);
}
.p-step__text h6 { color: var(--ep-dark); margin-bottom: 5px; }

.p-note {
  border: 1px solid #d0d0d0; padding: 20px; border-radius: 10px; margin-top: 20px;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .ep-theme .fs-ll { font-size: 27px; }
  .ep-theme .c-sec__ttl-en { font-size: 27px; }
}

@media screen and (max-width: 768px) {
  .ep-theme .c-col { flex-direction: column; gap: 40px; }
  .ep-theme .c-col__inner { width: 100%; }
  
  .p-sub-fv__inner { flex-direction: column; text-align: center; }
  .p-sub-fv__ttl, .p-sub-fv__img { width: 100%; }
  .p-sub-fv__ttl { margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; }
  .p-sub-fv__ttl h3 { font-size: 8vw; }
  
  .p-products__list { width: 100%; }
}

/* アニメーション用初期状態 */
.js-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.js-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}