/* =====================================================
   Front Page Styles
   責務：トップページ固有の「見た目」だけ
   ===================================================== */


/* =====================================================
   0. Hero Section（ヘッダー含む100vh対応）
   ===================================================== */

/* ヒーローセクション全体をビューポートに収める */
.hero-section {
  /* ヘッダー高さを考慮（PC: 約80px + 余白） */
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px); /* iOS Safari対応 */
  min-height: 480px; /* 最小高さ */
}

/* タブレット（md: 768px〜1023px） */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    /* タブレット: ヘッダー約60px + 管理バー32px */
    height: calc(100vh - 92px);
    height: calc(100dvh - 92px);
    min-height: 400px;
  }
}

/* スマホ（〜767px） */
@media (max-width: 767px) {
  .hero-section {
    /* スマホ: ヘッダー約56px + 管理バー46px */
    height: calc(100vh - 102px);
    height: calc(100dvh - 102px);
    min-height: 350px;
  }
}

/* WordPress管理バーがない場合（ログアウト時） */
body:not(.logged-in) .hero-section {
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  body:not(.logged-in) .hero-section {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }
}

@media (max-width: 767px) {
  body:not(.logged-in) .hero-section {
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
  }
}

/* =====================================================
   1. Orchard Hero（フル幅アニメーション領域）
   ===================================================== */

/* orchard 全体を画面幅いっぱいに広げるラッパー */
.orchard-fullwrap {
  width: 100vw;
  height: 100%;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* orchard-visual も高さ100% */
#orchard-visual {
  height: 100%;
}

/* orchard 内の画像は Cocoon / Tailwind の max-width 影響を受けない */
#orchard-visual img {
  max-width: none !important;
  height: auto;
  display: block;
}

/* ステージ本体 */
#orchard-visual .orchard-stage {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
}

/* 右下の角丸背景（装飾） */
#orchard-visual .bg-shape {
  position: absolute;
  right: -10%;
  bottom: -10%;
  width: 120%;
  height: 100%;
  background: #ffffff;
  border-radius: 0 0 200px 0;
  z-index: 1;
}

/* =====================================================
   2. Orchard Elements（PC）
   ===================================================== */

/* 地面 */
#orchard-visual .ground {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
}

/* 樹木 - 根元をロボット・農夫の移動ラインに合わせる */
#orchard-visual .tree {
  position: absolute;
  left: 52%;
  bottom: 5vh;
  width: 40%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.75;
}

/* 果物（imgタグ自体を配置） */
#orchard-visual .fruit {
  position: absolute;
  width: 6vw;
  max-width: 70px;
  cursor: pointer;
  z-index: 4;
  opacity: 0; /* 初期状態で非表示 */
}

/* PC用果物配置 - 木の上にバランスよく配置 */
#orchard-visual .fruit.apple  { left: 50%; top: 15%; }
#orchard-visual .fruit.lemon  { left: 40%; top: 25%; }
#orchard-visual .fruit.kabosu  { left: 60%; top: 20%; }
#orchard-visual .fruit.sudachi  { left: 35%; top: 35%; }
#orchard-visual .fruit.mango  { left: 63%; top: 32%; width: 8vw; max-width: 90px;}
#orchard-visual .fruit.grape  { left: 48%; top: 40%; }
#orchard-visual .fruit.orange { left: 55%; top: 38%; }

/* --- 農夫 (古い記述は削除し、新しいfarmer-containerに移行) --- */
/* #orchard-visual .farmer { ... } ← 削除 */

/* =====================================================
   3. Front Page Utility
   ===================================================== */

/* トップページでは WP デフォルトのタイトル類を非表示 */
.home .entry-title,
.home .entry-header,
.home .entry-meta {
  display: none;
}

.home .entry-content {
  margin: 0;
  padding: 0;
}


/* =====================================================
   4. Responsive（タブレット・SP）
   ===================================================== */

/* タブレット（768px〜1023px） */
@media (min-width: 768px) and (max-width: 1023px) {

  /* 樹木を中央に - 根元をロボット・農夫の移動ラインに合わせる */
  #orchard-visual .tree {
    left: 55%;
    bottom: 5vh;
    width: 55%;
    transform: translateX(-50%);
  }

  /* 果物サイズ */
  #orchard-visual .fruit {
    width: 7vw;
    max-width: 60px;
  }

  /* 果物位置（タブレット用）- 木の葉の範囲内に配置 */
  /* 木: left:55%, width:55% → 葉は約left:30%〜75%の範囲 */
  #orchard-visual .fruit.apple   { left: 52%; top: 18%; }
  #orchard-visual .fruit.lemon   { left: 40%; top: 28%; }
  #orchard-visual .fruit.kabosu  { left: 62%; top: 22%; }
  #orchard-visual .fruit.sudachi { left: 35%; top: 38%; }
  #orchard-visual .fruit.mango   { left: 65%; top: 32%; }
  #orchard-visual .fruit.grape   { left: 48%; top: 42%; }
  #orchard-visual .fruit.orange  { left: 57%; top: 38%; }
}

/* スマホ（〜767px） */
@media (max-width: 767px) {

  /* 樹木を大きく・中央に - 根元をロボット・農夫の移動ラインに合わせる */
  #orchard-visual .tree {
    position: absolute;
    left: 55%;
    bottom: 5vh;
    top: auto !important;
    width: 90%;
    transform: translateX(-50%);
    opacity: 0.75;
  }

  /* 果物サイズ */
  #orchard-visual .fruit {
    width: 10vw;
    max-width: 50px;
  }

  /* 果物位置（SP用）- 木の葉の範囲内に配置 */
  /* 木: left:55%, width:90% → 葉は約left:15%〜85%の範囲 */
  #orchard-visual .fruit.apple   { left: 52%; top: 15%; }
  #orchard-visual .fruit.lemon   { left: 35%; top: 25%; }
  #orchard-visual .fruit.kabosu  { left: 65%; top: 20%; }
  #orchard-visual .fruit.sudachi { left: 28%; top: 35%; }
  #orchard-visual .fruit.mango   { left: 72%; top: 30%; }
  #orchard-visual .fruit.grape   { left: 48%; top: 40%; }
  #orchard-visual .fruit.orange  { left: 60%; top: 36%; }
}

/* --- ロボット --- */

/* 全体の枠組み */
.robot-container {
    position: absolute;
    bottom: 5%; /* PC初期位置 */
    left: 10%;
    width: 170px;
    height: 200px;
    z-index: 10;
    opacity: 0; /* 初期状態で非表示 */
}

/* SPでのロボットサイズ調整 */
@media (max-width: 767px) {
    .robot-container {
        width: 100px; /* 小さくする */
        height: 120px;
        bottom: 0;
    }
}

/* 本体 */
.robot-body {
    position: absolute;
    width: 100px; /* PC */
    height: auto;
    bottom: -8px;
    left: 0;
    z-index: 1;
}
@media (max-width: 767px) {
    .robot-body {
        width: 60px; /* SP */
        bottom: -5px;
    }
}

/* タイヤ共通 */
#left-tire, #right-tire {
    position: absolute;
    width: 25px;      /* PC */
    height: auto;
    bottom: 0px;
    z-index: 2;
    transform-origin: center center;
}
@media (max-width: 767px) {
    #left-tire, #right-tire {
        width: 15px; /* SP */
    }
}

/* 各タイヤの横位置 */
#left-tire {
    left: 8px; /* PC */
}
#right-tire {
    left: 69px; /* PC */
}
@media (max-width: 767px) {
    #left-tire { left: 5px; }
    #right-tire { left: 41px; }
}


/* --- ドローン --- */

/* ドローン全体の箱（位置調整） */
#drone-container {
    position: absolute;
    top: 20%;
    right: 20%;
    width: 140px;    /* PCサイズ */
    z-index: 7;
    opacity: 0; /* 初期状態で非表示 */
}

/* ドローン本体 */
#drone-body {
    width: 100%;
    display: block;
    position: relative;
}

/* プロペラ */
#drone-propeller {
    position: absolute;
    top: 3.1px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 2;
}

/* SPでのドローン調整 */
@media (max-width: 767px) {
    #drone-container {
        width: 100px; /* 少し小さく */
        top: 15%;
        right: 10%;
    }
}


/* ========================================
   農夫 2026/1/12追加 (統合版)
   ======================================== */

/* 1. コンテナ（箱）の設定 */
.farmer-container {
    width: auto;
    max-width: none;
    position: absolute;
    bottom: 5%; /* PC初期位置 */
    z-index: 5;
    opacity: 0; /* 初期状態で非表示 */
}

/* 2. 上半身の設定 */
img.farmer-body {
    width: 200px;
    height: auto;
    position: relative;
    z-index: 3;
}

/* 3. 足のサイズと位置 */
img.farmer-leg {
    width: 100px;
    height: auto;

    /* 位置合わせ */
    position: absolute;
    bottom: 3px;

    /* 足の位置（股関節）の調整 */
    left: 85px;

    z-index: 1;
}

/* SPでの農夫調整 */
@media (max-width: 767px) {
    .farmer-container {
        bottom: 0;
        /* transform は JavaScript で制御するため削除 */
    }

    /* スマホでは農夫の各パーツを縮小 */
    img.farmer-body {
        width: 120px;
    }

    img.farmer-leg {
        width: 60px;
        left: 51px;
    }
}


/* --- Swiper --- */

/* Swiperのラッパーを強制的にフレックスボックスにする */
.swiper-frontline .swiper-wrapper {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100% !important;
    box-sizing: content-box !important;
    /* 高さ揃えを無効化（アスペクト比を優先するため） */
    align-items: flex-start !important;
}

/* スライド自体の設定 */
.swiper-frontline .swiper-slide {
    display: block !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

/* アスペクト比を有効にするための設定 */
.swiper-frontline .swiper-slide > a {
    display: block !important;
    width: 100% !important;
    /* height: 100% !important; ← 削除 */
    position: relative;
}