/* ========================
   Color Tokens & Globals
   ======================== */
:root{
  --brand-1: #00aeff3a; /* Sky */
  --brand-2: #0307f82c; /* Indigo */
  --brand-3: #0f3c8054; /* Teal */
  --ink: #0f172a;
  --paper: #eff3f3;

  --curve-h: 180px;  /* 波形の高さ */
  --lift: 100px;     /* 前セクションへ食い込む量 */

  --fade-h: 160px;
  --fade-opacity: 0.85;
  --fade-blur: 12px;
}

/* ========================
   Base
   ======================== */
html,
body{
  height: 100%;
}

body{
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Serif JP", "Inter", serif;
}

a{
  text-decoration: none;
}

.navbar {
  top: 0;
  z-index: 1000;         /* 大きめでOK */
}

/* ========================
   Navbar
   ======================== */
.navbar{
  height: 50px;
  color: #c4beb2;
  padding-bottom: 0;
}

.navbar-blur{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: color-mix(in oklab, #ffffff 70%, transparent);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.navbar .navbar-toggler{
  border: 0;
}

.navbar .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(31,41,55,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand{
  font-family: "Noto Serif JP", "Inter", serif;
  font-style: normal;
  font-size: xx-large;
  letter-spacing: 8px;
  color: rgb(82, 78, 70);
}

.btn-brand{
  background-color: #666056;
  border-color: #575147;
  color: #fff;
}

.btn-brand:hover{
  background-color: #382c1b;
  border-color: #382c1b;
}

/* ========================
   背景：固定動画（全体）
   ======================== */
.bg-video-wrap{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.bg-video-wrap video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.05);
}

.bg-video-tint{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.158),
    rgba(255, 255, 255, 0.233) 45%,
    rgba(173, 173, 173, 0.034)
  );
}

/* ========================
   Sticky Stack（パネル）
   ======================== */
.stack{
  position: relative;
}

.panel{
  position: sticky;
  top: 0;
  min-height: 100vh;   /* 1画面ずつ貼り付く */
  overflow: clip;
  z-index: 0;
  isolation: isolate;
}

/* パネル共通の上下余白 */
.py-panel{
  padding-top: clamp(72px, 10vh, 140px);
  padding-bottom: clamp(72px, 10vh, 140px);
}

.anchor-offset {
  height: 10px; 
  pointer-events: none; /* クリックの邪魔をしない */
}

/* ========================
   HERO
   ======================== */
.hero{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

/* 中央ロゴ画像（ふよふよ） */
.hero-center-image{
  position: fixed;
  top: 55%;
  left: 50%;
  z-index: -1;
  pointer-events: none;
}

.hero-center-image img{
  width: 35vw;
  max-width: 250px;
  opacity: 0.95;
  filter: drop-shadow(0 20px 35px rgba(0,0,0,.25));
  animation: float 7s ease-in-out infinite;
  pointer-events: none;
}

/* Heroテキスト */
.hero .hero-inner{
  position: relative;
  z-index: 0;
  top: 210px;
}

/* ロゴ系タイトル */
.title{
  font-family: "Italianno", cursive;
  font-weight: 100;
  font-style: normal;
  letter-spacing: 10px;
}

/* ガラス調ボタン */
.btn-glass{
  --ring: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: .75rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) inset;
}

/* 浮遊アニメーション */
@keyframes float{
  0%,100%{
    transform: translate(-50%, -60%) translateY(0);
  }
  50%{
    transform: translate(-50%, -60%) translateY(-12px);
  }
}

/* ========================
   パネル背景
   ======================== */
.panel-muted{
  background: var(--muted);
}

.panel-paper{
  background: var(--paper);
}

.panel-grad1{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand-1) 16%, #ffffff54) 0%,
    #ffffff42 100%
  );
}

.panel-grad2{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand-2) 14%, #ffffff42) 0%,
    #ffffff34 100%
  );
}

.panel-grad3{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand-3) 16%, #fff) 0%,
    #fff 100%
  );
}

/* ========================
   波形シェイプ
   ======================== */
.shape-top{
  position: absolute;
  top: calc(-1 * var(--lift));
  left: 0;
  width: 100%;
  height: calc(var(--curve-h) + var(--lift) + 6px);
  line-height: 0;
  pointer-events: none;
  z-index: -1;
}

.separator-wave svg{
  display: block;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}

.separator-wave svg path{
  fill: currentColor !important;
  stroke: none !important;
}

/* ========================
   カード
   ======================== */
.soft-card{
  border: none;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow:
    0 10px 30px rgba(2,6,23,.08),
    0 2px 6px rgba(2,6,23,.06);
}

.object-cover{
  object-fit: cover;
}

/* ========================
   Motion reduce
   ======================== */
@media (prefers-reduced-motion: reduce){
  .bg-video-wrap video{
    animation: none !important;
  }
}

/* ========================
   #features ぼかしキャップ
   ======================== */
#features{
  position: relative;
}

#features .blur-cap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 500px;
  z-index: 2;
  pointer-events: none;
  background: transparent;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 100%);
}

#features .shape-top{
  z-index: 0;
}

/* ========================
   SDFARM 理念セクション
   ======================== */
#about-sdfarm{
  position: relative;
  color: var(--ink);
}

#about-sdfarm .py-panel{
  padding-top: clamp(100px, 16vh, 180px);
  padding-bottom: clamp(80px, 12vh, 130px);
}

/* 見出し「SDFARM」 */
#about-sdfarm h2{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 2.1rem;
  color:#272626;
}

/* サブコピー */
#about-sdfarm .tracking-wide{
  font-size: 1rem;
  color: #272626;
  letter-spacing: .18em;
}

/* リード文 */
#about-sdfarm .lead{
  line-height: 2.4;
  font-size: 1.2rem;
  color: #272626;
  max-width: 760px;
  margin: 0 auto;
}

/* 段落の間隔 */
#about-sdfarm p + p{
  margin-top: .9rem;
}

/* 背景にうっすら白紙レイヤー */
#about-sdfarm::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(4px);
  z-index: -1;
}

/* スマホ調整（理念コピー） */
@media (max-width: 575.98px){
  #about-sdfarm h2{
    font-size: 1.6rem;
    letter-spacing: .16em;
  }
  #about-sdfarm .tracking-wide{
    font-size: .8rem;
    letter-spacing: .14em;
  }
  #about-sdfarm .lead{
    text-align: left;
    line-height: 1.9;
    font-size: 0.8rem;
  }
}

/* ========================
   #philosophy 単体
   ======================== */
#philosophy{
  font-family: "Shippori Mincho", serif;
  color: #333;
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 20px;
  line-height: 2.2;
}

#philosophy h2{
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw + 1rem, 2.2rem);
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

#philosophy .tagline{
  font-family: "Shippori Mincho", serif;
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.7;
  margin-bottom: 2.5rem;
}

#philosophy p{
  font-weight: 400;
  margin-bottom: 1.8rem;
  color:#272626;
  font-size: 2rem;
}

/* ==============================
   HYDROPONICS セクション
   ============================== */
#hydroponics{
  position: relative;
  padding: 100px 20px;
}

#hydroponics::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(4px);
}

#hydroponics .container{
  position: relative;
  z-index: 1;
}

/* 写真まわりの浮遊感 */
#hydroponics .hydro-img,
#hydroponics .hydro-photo-placeholder{
  position: relative;
  z-index: 2;
}

#hydroponics .hydro-img img,
#hydroponics .hydro-photo-placeholder{
  border-radius: 18px;
  box-shadow:
    0 22px 50px rgba(15,23,42,0.16),
    0 6px 14px rgba(15,23,42,0.10);
}

/* 「板」 */
#hydroponics .hydro-slab{
  position: relative;
  padding: 48px 32px;
  background: rgba(255, 255, 255, 0.185);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.12),
    0 6px 18px rgba(15, 23, 42, 0.08);
}

#hydroponics .hydro-slab::before,
#hydroponics .hydro-slab::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
}

#hydroponics .hydro-slab::before{
  top: -26px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0)
  );
}

#hydroponics .hydro-slab::after{
  bottom: -26px;
  background: linear-gradient(to top,
    rgba(255,255,255,0.25),
    rgba(255,255,255,0)
  );
}

/* ラベル & 見出し & 本文 */
#hydroponics .hydro-label{
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: rgba(0,0,0,0.38);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

#hydroponics h2.h4{
  font-size: clamp(1.2rem, 1.4vw + 0.8rem, 1.4rem);
  color: #2a2a2a;
  letter-spacing: 0.03em;
  font-weight: 600;
  margin-bottom: 1rem;
}

#hydroponics p.text-secondary{
  color: #494949;
  font-size: 1rem;
  line-height: 1.9;
}

#hydroponics p + p{
  margin-top: 0.6rem;
}

/* PC 画像位置 */
@media (min-width: 992px){
  #hydroponics .row:nth-of-type(1) .hydro-img,
  #hydroponics .row:nth-of-type(1) .hydro-photo-placeholder{
    transform: translateY(10px);
  }
  #hydroponics .row:nth-of-type(2) .hydro-img,
  #hydroponics .row:nth-of-type(2) .hydro-photo-placeholder{
    transform: translateY(6px);
  }
  #hydroponics .row:nth-of-type(3) .hydro-img,
  #hydroponics .row:nth-of-type(3) .hydro-photo-placeholder{
    transform: translateY(12px);
  }
}

/* Hydroponics：タブレット以下 */
@media (max-width: 991.98px){
  #hydroponics{
    padding: 60px 16px;
  }

  #hydroponics .row{
    text-align: center;
    margin-bottom: 40px !important;
  }

  #hydroponics .hydro-img,
  #hydroponics .hydro-photo-placeholder{
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

/* Hydroponics：スマホ文字 */
@media (max-width: 575.98px){
  #hydroponics .hydro-label{
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
    opacity: 0.55;
  }
  #hydroponics h2.h4{
    font-size: 1.15rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
    letter-spacing: 0.02em;
  }
  #hydroponics p.text-secondary{
    font-size: 0.8rem;
    line-height: 1.85;
    color: #4d4d4d;
  }
  #hydroponics p + p{
    margin-top: 0.5rem;
  }
}

@media (max-width: 767.98px){
  #hydroponics .hydro-slab{
    padding: 28px 16px;
    box-shadow:
      0 16px 40px rgba(15, 23, 42, 0.10),
      0 4px 12px rgba(15, 23, 42, 0.06);
  }
  #hydroponics .ratio{
    border-radius: 12px;
  }
}

/* Sticky の強制解除（モバイル） */
@media (max-width: 768px){
  .panel{
    top: auto !important;
    overflow: visible !important;
  }
}

/* ============================
   LUMILEAF セクション
   ============================ */
#lumileaf .lumileaf-img img{
  border-radius: 20px;
  box-shadow:
    0 20px 45px rgba(0,0,0,0.12),
    0 6px 14px rgba(0,0,0,0.07);
}

#lumileaf .lumileaf-label{
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  opacity: 0.65;
}

#lumileaf h2.h4{
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: 0.03em;
}

#lumileaf p.text-secondary{
  font-size: 0.95rem;
  line-height: 1.7;
}

#lumileaf a.btn{
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

/* 画像センター */
#lumileaf .lumileaf-photo{
  width: 70%;
  max-width: 900px;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow:
    0 20px 45px rgba(0,0,0,0.12),
    0 6px 14px rgba(0,0,0,0.07);
}

@media (max-width: 767.98px){
  #lumileaf .lumileaf-photo{
    width: 80%;
  }
  #lumileaf p.text-secondary{
    font-size: 0.9rem;
  }
  #lumileaf h2.h4{
    font-size: 1.35rem;
  }
  #lumileaf a.btn{
    font-size: 0.85rem;
  }
}

/* ==========================
   QUALIFICATION section
   ========================= */
#qualification.panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 60px 20px;
}

#qualification .qual-inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

#qualification .qual-label{
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  opacity: 0.7;
}

#qualification .qual-title{
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
}

#qualification .qual-copy{
  font-size: 0.95rem;
  line-height: 1.9;
  margin: 0 auto 2.5rem;
  max-width: 720px;
}

#qualification .qual-images{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  justify-items: center;
  margin-bottom: 1.5rem;
}

#qualification .cert-img{
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 16px 36px rgba(0,0,0,0.14),
    0 4px 10px rgba(0,0,0,0.09);
}

#qualification .qual-note{
  font-size: 0.8rem;
  line-height: 1.8;
  opacity: 0.75;
}

/* 資格セクション背景動画 */
#qualification .qual-video-wrap{
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

#qualification .qual-video-wrap video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(1.05);
}

/* タブレット：2列×2段 */
@media (max-width: 992px){
  #qualification .qual-images{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  #qualification .cert-img{
    max-width: 220px;
  }
}

/* スマホ：1列表示＋動画OFF */
@media (max-width: 576px){
  #qualification{
    background: transparent !important;
  }
  #qualification .qual-inner{
    padding: 0 16px;
  }
  #qualification .qual-copy{
    font-size: 0.9rem;
  }
  #qualification .qual-images{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #qualification .cert-img{
    max-width: 260px;
  }
  #qualification .qual-note{
    font-size: 0.78rem;
  }
  #qualification .qual-video-wrap video{
    display: none;
  }
}
/* ==========================
   COMPANY SECTION
========================== */

#company .qual-video-wrap{
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

#company .qual-video-wrap video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(1.05);
}


/* 全体を中央に置く */
#company.panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 5%;
  min-height: 100vh;
  background: transparent !important;
}

/* ガラスカード */
.company-card {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1100px;

  padding: 48px 145px;
  border-radius: 24px;

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 20px 55px rgba(0,0,0,0.12),
    0 6px 16px rgba(0,0,0,0.08);
}

/* 左列 */
.company-info {
  flex: 1.4;
}

#company dl {
  margin-top: 1.4rem;
  font-size: 1rem;
  line-height: 1.9;
}
#company dt {
  font-size: 0.8rem;
  opacity: 0.6;
}
#company dd {
  margin-left: 0;
  font-size: 1.2rem;
}

/* 右側ロゴ */
.company-logo {
  flex: 0 0 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.company-logo img {
  width: 100%;
  max-width: 260px;
  opacity: 0.9;
}

/* ==========================
   RESPONSIVE
========================== */
@media (max-width: 991px) {
  .company-card {
    flex-direction: column;
    text-align: center;
    padding: 36px 24px;
    gap: 32px;
  }

  .company-logo {
    flex: unset;
  }
  .company-logo img {
    max-width: 220px;
    margin: 0 auto;
  }

  #company dl {
    font-size: 0.9rem;
    line-height: 1.8;
  }
}

@media (max-width: 576px) {
  .company-card {
    padding: 28px 18px;
    border-radius: 20px;
  }

  .company-logo img {
    max-width: 180px;
  }

    #company .qual-video-wrap video{
    display: none;
  }
}





/* =============================
   Contact section
   ============================= */

#contact{
  position: relative;
  padding: 100px 0;
  background-color: rgb(241, 239, 237);
}

.contacts{
  text-align: center;
}

#contact .contact-card{
  background: rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  padding: 30px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 20px 55px rgba(0,0,0,0.14),
    0 6px 16px rgba(0,0,0,0.08);
}

/* タイトル */
#contact h2.h4{
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color:#181104;
}

/* フォーム説明 */
#contact p.small{
  font-size: 0.9rem;
  line-height: 1.8;
  color:#181104;
}

/* 開閉ボタン (PC) */
.contact-toggle{
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding-inline: 1.4rem;
}

/* 最初は閉じておく（PC） */
.contact-panel{
  display: none;
}

/* 開いたとき */
.contact-panel.is-open{
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* スマホでは常に開く */
@media (max-width: 768px){
  .contact-toggle{
    display: none !important;
  }
  .contact-panel{
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #contact{
    padding: 70px 0;
  }
  #contact .contact-card{
    padding: 22px 16px;
  }
}

/* ============================
   Footer
   ============================ */
.site-footer{
  position: relative;
  z-index: 1;
  padding: 28px 0 32px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
}

.site-footer .footer-links a{
  color: inherit;
  opacity: 0.7;
  text-decoration: none;
  margin: 0 0.25rem;
}

.site-footer .footer-links a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* =========================
   改行制御（PC / SP）
   ========================= */

/* まず全部非表示 */
.pc-br,
.sp-br{
  display: none;
}

/* PC の改行 */
@media (min-width: 577px){
  .pc-br{
    display: inline;
  }
}

/* スマホの改行 */
@media (max-width: 576px){
  .sp-br{
    display: inline;
  }
}

/* =========================
   背景動画共通ユーティリティ
   ========================= */

/* qualification / company 共通ラッパー */
.qual-video-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.qual-video-wrap video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 白いヴェール（必要なところに .qual-overlay を置く） */
.qual-overlay{
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.concept-slide {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.concept-slide.is-visible {
  opacity: 1;
  transform: translateY(0);
}