/* =========================================
   変数定義 (Color & Design Tokens)
   ========================================= */
:root {
  /* カラーパレット */
  --color-bg: #fcfcf7; /* 生成り色（和紙のような白） */
  --color-text: #333333; /* メインテキスト */
  --color-main: #6bbf59; /* 早苗グリーン */
  --color-accent: #edae4a; /* 稲穂ゴールド */
  --color-blue: #72b0c9; /* やさしい空色 */
  --color-white: #ffffff;

  /* シェイプ定義 */
  --radius-sm: 8px;
  --radius-lg: 24px; /* 大きめの角丸 */
  --radius-pill: 50px; /* カプセル型 */
}

body {
  font-family: "Zen Maru Gothic", sans-serif; /* 丸ゴシック指定 */
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
}

/* コンテナ設定 */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PCのみ表示（中黒「・」をPCだけ表示する場合など） */
@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }

  /* タイトルの文字サイズ調整 */
  .block-title {
    font-size: 1.8rem; /* スマホでは少し小さく */
    line-height: 1.4;
  }
}

@media (min-width: 769px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: inline;
  }
}

/* =========================================
   全ページ共通：横揺れ・はみ出し防止の決定版
   ========================================= */

/* 1. 本体のはみ出しを「クリップ」する */
/* hidden ではなく clip を使うことで、Stickyメニューを壊さずにはみ出しだけ消します */
body {
  overflow-x: clip !important;
  width: 100%;
  position: relative;
}

/* 2. 主要なセクションも幅を強制制限 */
main,
section,
footer,
.page-header {
  max-width: 100vw !important; /* 画面幅以上に広げない */
  overflow-x: clip !important; /* はみ出た背景画像をカット */
}

/* 3. ヘッダーを確実に最前面・全幅にする */
#header {
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 99999 !important; /* どの要素よりも手前に */
}

/* 4. スマホ時のコンテナ調整（念のため） */
@media (max-width: 768px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible; /* コンテナ自体は中身を見せる */
  }
}

/* =========================================
   ストーリーテリング・ローディング（完全修正版）
   ========================================= */

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-bg);
  z-index: 999999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}

#loading.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.story-container {
  position: relative;
  /* 600px → 400px に縮小してスマホでも見やすく */
  width: 100%;
  max-width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Scene 1: 技術 (タイミング調整) --- */
.tech-scene {
  /* 3秒で吸い込み完了、すぐに消える */
  animation: fadeOutScene 0.2s forwards;
  animation-delay: 3s;
}
/* --- Scene 1.5: メッセージ (インパクト強化版) --- */
.message-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 20px; /* 画面端に張り付かないよう余白 */
  box-sizing: border-box;
  text-align: center;
  opacity: 1; /* コンテナ自体は表示しておく（中身で制御） */
  z-index: 20;
  pointer-events: none;
  animation: messageFlash 2.5s ease-in-out forwards;
  animation-delay: 3.1s;
}
/* メッセージのアニメーション定義（微調整） */
@keyframes messageFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  } /* 早く出して */
  85% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  } /* 長く留める */
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  } /* 消える */
}
.loading-copy {
  font-family: "Shippori Mincho", serif;
  font-size: 3.5rem; /* PCサイズ */
  font-weight: 900;
  color: #333;
  line-height: 1.4;
  letter-spacing: 0.1em; /* 少し詰める */
  white-space: nowrap; /* 強制的に1行にする */
  text-shadow: 0 0 20px rgba(107, 191, 89, 0.4);
}

/* スマホ対応（1行で収まるサイズに） */
@media (max-width: 768px) {
  .loading-copy {
    font-size: 1.8rem; /* スマホでは小さくして1行維持 */
    letter-spacing: 0.05em;
  }

  /* .sp-only は他でも使うので、display: blockのままでOKですが
     今回はHTMLから<br>を消したので影響ありません */
}
/* 改行禁止のラッパー（これは常に表示） */
.nowrap {
  white-space: nowrap;
  display: inline-block;
  opacity: 1; /* ★重要：親は見えている状態にする */
}

.char {
  display: inline-block;
  opacity: 0; /* 最初は隠す */
  transform: translateY(20px) scale(1.5);
  filter: blur(10px);

  /* 順番に現れて、スッと消える */
  animation: charReveal 3s ease-out forwards;

  /* 色などの継承 */
  color: inherit;
}

/* 遅延設定（変更なし） */
.loading-copy .char:nth-of-type(1) {
  animation-delay: 3s;
}
.loading-copy .char:nth-of-type(2) {
  animation-delay: 3.1s;
}
.loading-copy .char:nth-of-type(3) {
  animation-delay: 3.2s;
}
.loading-copy .char:nth-of-type(4) {
  animation-delay: 3.3s;
}
.loading-copy .char:nth-of-type(5) {
  animation-delay: 3.5s;
}
.loading-copy .char:nth-of-type(6) {
  animation-delay: 3.6s;
}
.loading-copy .char:nth-of-type(7) {
  animation-delay: 3.7s;
}

/* 背景の光の爆発 */
.message-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(107, 191, 89, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;

  /* 文字が出る瞬間に背後で光る */
  animation: burstEffect 1.5s ease-out forwards;
  animation-delay: 3s;
}

/* 中央の稲（サイズ調整） */
.center-rice {
  /* 変更前: font-size: 6rem; */
  /* 変更後: 小さくする（例：4rem または px指定） */
  font-size: 4rem;

  /* 画像(img/svg)を使用している場合は width で制御するのが確実です */
  width: 260px; /* ここをお好みのサイズに調整してください */
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  animation: ricePulse 3s ease-in-out forwards;
}

.center-rice img {
  width: 100%;
  height: auto;
}

/* 1. 回転の中心点（親要素） */
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  animation: spinAccelerate 3s cubic-bezier(0.5, 0, 1, 1) forwards;
}

.icon-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}
.deg-0 {
  transform: rotate(0deg);
}
.deg-90 {
  transform: rotate(90deg);
}
.deg-180 {
  transform: rotate(180deg);
}
.deg-270 {
  transform: rotate(270deg);
}

/* 2. ローディング：回転アイコンの軸調整 */
.tech-icon {
  width: 120px;
  height: 120px;
  margin-top: -60px;
  margin-left: -60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 6rem;

  /* アニメーション定義（そのまま） */
  animation: techAnimate 3s cubic-bezier(0.5, 0, 1, 1) forwards;
}

/* SVG画像用設定 */
.tech-icon img,
.tech-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Scene 2: スタッフ登場 --- */
.final-scene {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  opacity: 0;
  /* 変更前: delay 4.3s */
  /* 変更後: 5.6s (メッセージ消去後に合わせて開始) */
  animation: fadeInFarmer 0.8s ease-out forwards;
  animation-delay: 5.6s;
}

/* 農家さんイラスト（サイズ調整） */
.farmer-illu {
  font-size: 8rem; /* 12rem → 8rem に縮小 */
  line-height: 1;
}

.company-logo {
  font-size: 1.5rem; /* ロゴ文字も少し控えめに */
  font-weight: bold;
  text-align: center;
  color: var(--color-text);
}

/* =========================================
   ローディングアイコンの向き補正
   ========================================= */

/* 
   配置のために親要素(.icon-wrapper)を回転させている分、
   中の画像(.tech-icon img)を逆回転させて、常に「上」を向くように補正します。
*/

/* 0度（上）のアイコン：補正なし */
.deg-0 .tech-icon img,
.deg-0 .tech-icon svg {
  transform: rotate(0deg);
}

/* 90度（右）のアイコン：-90度戻す */
.deg-90 .tech-icon img,
.deg-90 .tech-icon svg {
  transform: rotate(-90deg);
}

/* 180度（下）のアイコン：-180度戻す */
.deg-180 .tech-icon img,
.deg-180 .tech-icon svg {
  transform: rotate(-180deg);
}

/* 270度（左）のアイコン：-270度戻す */
.deg-270 .tech-icon img,
.deg-270 .tech-icon svg {
  transform: rotate(-270deg);
}

/* =========================================
   アニメーション Keyframes（軌道修正）
   ========================================= */
@keyframes charReveal {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(1.5);
    filter: blur(10px);
  }
  15% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    color: var(--color-text);
  }
  80% {
    opacity: 1;
    transform: translateY(0) scale(1);
    color: var(--color-text);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.1); /* 最後はふわっと消える */
    filter: blur(5px);
  }
}

@keyframes burstEffect {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(50);
  } /* 一気に広がる */
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(80);
  }
}

/* メッセージの登場・退場アニメーション */
@keyframes messageFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  } /* パッと出る */
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  } /* 少し留まる */
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
  } /* ふわっと消える */
}

@keyframes spinAccelerate {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(1080deg);
  }
}

@keyframes techAnimate {
  0% {
    /* 半径を広げる場合：180px → 220px などに増やす */
    transform: translateX(220px) rotate(0deg) scale(1);
    opacity: 1;
  }
  60% {
    /* 0%と同じ値にする */
    transform: translateX(220px) rotate(-180deg) scale(1);
    opacity: 1;
  }
  100% {
    /* 最後は中心(0px)へ */
    transform: translateX(0px) rotate(-1080deg) scale(0);
    opacity: 0;
  }
}

@keyframes ricePulse {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px gold);
  } /* 光も少し控えめに */
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes fadeOutScene {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeInFarmer {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* スマホ対応 */
@media (max-width: 768px) {
  .loading-copy {
    font-size: 2rem;
  }
  .sp-only {
    display: block;
  } /* スマホでは改行 */
}

/* --- ローディング画面：ロゴのみ小さくする設定 --- */

/* ロゴの親枠に幅制限をかける */
.final-scene .company-logo {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* 画像が入っている場合、枠に合わせて縮小 */
.final-scene .company-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 文字の場合のサイズ調整（画像なら無視されます） */
.final-scene .company-logo {
  font-size: 1.2rem; /* 必要に応じて調整 */
}
/* スマホでは画面に収まるよう調整 */
@media (max-width: 768px) {
  .final-scene .company-logo {
    max-width: 240px;
  }
}
/* =========================================
   Header (Full Width & Scroll Effect)
   ========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition:
    background-color 0.4s,
    padding 0.4s,
    box-shadow 0.4s;
  color: #fff; /* 初期状態は白文字 */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: none;
  padding: 25px 50px;
  padding: 0 10px;
  box-sizing: border-box;
  transition: padding 0.4s;
}

/* 画像本体 */
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------------
   スクロール時の変化
   ---------------------------------- */
.site-header.is-scrolled .logo {
  margin-top: -15px;
}

.site-header.is-scrolled .logo a {
  /* 小さく収納 */
  width: 90px;
  height: 90px;
  border-radius: 0 0 15px 15px;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------
   スマホ・タブレット対応
   ---------------------------------- */
@media (max-width: 900px) {
  .logo {
    margin-top: -15px;
  }

  .logo a {
    /* スマホでの初期サイズ */
    width: 100px;
    height: 100px;
    border-radius: 0 0 20px 20px;
  }

  /* スクロール時（スマホ） */
  .site-header.is-scrolled .logo a {
    width: 70px;
    height: 70px;
    border-radius: 0 0 12px 12px;
  }
}

/* =========================================
   Logo Switching (正方形 ⇔ 横長 切り替え)
   ========================================= */

/* --- 1. 初期状態（トップにいる時） --- */
/* ロゴの親枠 */
.logo {
  position: relative;
  z-index: 100;
  line-height: 1;
  margin-top: -25px;
  margin-top: auto;
}

/* 1. 初期状態：白枠の中に入った横長ロゴ */
.logo a {
  display: flex;
  justify-content: center;
  align-items: center;

  /* ★サイズ調整：大きすぎず、かつ存在感のあるサイズ */
  width: 220px;
  height: 110px;
  height: 84px;

  background-color: #fff;
  /* 下側だけ丸くして「吊り下げバッジ」にする */
  border-radius: 0 0 15px 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 15px 25px;
  padding: 10px 25px;

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 画像の表示制御 */
/* 初期：メインロゴを表示、スクロール用を隠す */
.logo-square {
  display: block !important;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-horizontal {
  display: none !important;
}

/* --- スクロール後の状態 (.is-scrolled) --- */

.site-header.is-scrolled .logo {
  margin-top: 0; /* マージンを戻す */
}

.site-header.is-scrolled .logo a {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  height: 50px;
  min-width: 200px;
}

/* スクロール後：メインを隠し、スクロール用を表示 */
.site-header.is-scrolled .logo-square {
  display: none !important;
}

.site-header.is-scrolled .logo-horizontal {
  display: block !important;
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
  /* 初期状態（スマホ） */
  .logo {
    margin-top: -15px;
  }
  .logo a {
    width: 160px;
    height: 80px;
    padding: 10px 15px;
  }
  .site-header.is-scrolled .logo a {
    height: 40px;
    min-width: 150px;
  }
  .site-header.is-scrolled .logo-horizontal {
    height: 30px;
  }
}

/* =========================================
   PC Navigation & Dropdown
   ========================================= */
.pc-nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

/* リストアイテムの基準位置設定 */
.pc-nav li {
  position: relative; /* プルダウンの配置基準 */
  padding: 10px 0; /* ホバー判定領域を広げるための余白 */
}

.pc-nav a {
  text-decoration: none;
  color: inherit; /* ヘッダーの文字色（白or黒）を継承 */
  font-weight: bold;
  font-size: 1.05rem;
  transition: opacity 0.3s;
}

/* ▼▼▼ プルダウンメニューのデザイン ▼▼▼ */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 260px; /* 少し幅をスリムに */
  background: #fff;
  /* 上下のパディングを減らしてコンパクトに */
  padding: 8px 0;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;

  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0; /* フレックスの隙間はなくす */
}

/* 親（li）にホバーしたら表示 */
.has-child:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0); /* すっと上に上がる */
}

/* 三角形の吹き出しポインタ（装飾） */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
}

/* プルダウン内のリンクスタイル */
.dropdown-menu li {
  padding: 0; /* 親のpaddingリセット */
}
/* リンク自体のパディングと文字サイズ調整 */
.dropdown-menu a {
  display: flex;
  align-items: center; /* アイコンと文字のズレ防止 */

  /* 上下の余白を詰める */
  padding: 10px 20px;

  font-size: 0.9rem; /* 少し小さくして上品に */
  font-weight: 500; /* 太すぎないように */
  color: #333 !important;
  text-shadow: none;
  transition:
    background 0.2s,
    color 0.2s;

  /* 文字間を少し詰める場合（お好みで） */
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.dropdown-menu a:hover {
  background: #f4f4f4;
  color: var(--color-main) !important;
}

/* アイコン（絵文字）の隙間調整 */
.dropdown-menu span {
  margin-right: 10px; /* 適度な間隔 */
  font-size: 1.1rem; /* アイコンは少し大きく */
}

/* リストアイテムのリセット */
.dropdown-menu li {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* お問い合わせボタン（大きく目立つように） */
.btn-contact {
  background: var(--color-accent); /* 稲穂ゴールド */
  color: #fff !important; /* 強制的に白 */
  padding: 15px 35px; /* 大きく */
  border-radius: 4px; /* 少し角丸（幾何学意識） */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(237, 174, 74, 0.4);
  text-shadow: none;
  transition:
    transform 0.3s,
    background 0.3s;
}
.btn-contact:hover {
  transform: translateY(-2px);
  background: #e5a030;
}

/* ----------------------------------
   スクロール時の変化 (.is-scrolled)
   ---------------------------------- */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.95); /* 白背景（少し透過） */
  color: var(--color-text); /* 文字を黒へ */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* スクロール時は少し高さを狭く */
.site-header.is-scrolled .header-container {
  padding: 15px 50px;
}

.site-header.is-scrolled .logo a,
.site-header.is-scrolled .pc-nav a {
  text-shadow: none; /* 影を消す */
}

/* =========================================
   SP Hamburger Menu
   ========================================= */
.hamburger {
  display: none; /* PCでは非表示 */
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 1100; /* ナビより上 */
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: currentColor; /* 文字色と同じ */
  border-radius: 3px;
  position: absolute;
  left: 0;
  transition: 0.3s;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
  bottom: 0;
}

/* SPメニューが開いた時のハンバーガー変形 */
.hamburger.active span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg);
  background-color: #333;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: rotate(-45deg);
  background-color: #333;
}

/* SPドロワーメニュー本体 */
.sp-nav {
  position: fixed;
  top: 0;
  right: -100%; /* 画面外へ隠す */
  width: 100%;
  height: 100vh;
  background: var(--color-bg); /* 生成り色 */
  z-index: 1050;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.4s ease;
}
.sp-nav.active {
  right: 0; /* 出現 */
}
.sp-nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
}
.sp-nav li {
  margin-bottom: 30px;
}
.sp-nav a {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-text);
  text-decoration: none;
}
.sp-btn-contact {
  display: inline-block;
  background: var(--color-accent);
  color: #fff !important;
  padding: 15px 40px;
  border-radius: 50px;
  margin-top: 20px;
}

/* レスポンシブ切り替え */
@media (max-width: 900px) {
  .pc-nav {
    display: none;
  } /* PCナビ隠す */
  .hamburger {
    display: block;
  } /* ハンバーガー出す */
  .header-container {
    padding: 15px 20px;
  }
  .header-container,
  .site-header.is-scrolled .header-container {
    /* 幅の制限を解除し、画面いっぱい使う */
    width: 100%;
    max-width: none;
    /* 左右に振り分ける（ロゴ← →ハンバーガー） */
    justify-content: space-between;
    /* 余白の調整（スクロール時も同じにする） */
    padding: 15px 20px;
  }

  /* ロゴが大きすぎる場合は少し調整 */
  .logo a {
    font-size: 1.4rem;
  }

  /* ハンバーガーの位置確保 */
  .header-right {
    margin-left: auto; /* 右寄せを確実に */
  }
  .btn-contact {
    display: none;
  } /* ヘッダー内のボタンは隠し、ドロワー内を使う */
}

/* =========================================
   Organic Contact Button (Nature Sense)
   ========================================= */
.btn-organic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* 稲穂ゴールドのグラデーションで深みを出す */
  background: linear-gradient(135deg, #edae4a 0%, #e59d28 100%);
  color: #fff !important;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  padding: 14px 28px;

  /* 有機的な形（完璧な丸ではなく、少し歪んだ楕円） */
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  box-shadow: 0 4px 15px rgba(237, 174, 74, 0.4);

  transition: all 0.4s ease;
  animation: floating 3s ease-in-out infinite; /* ふわふわ動く */
}

/* ホバー時の変化 */
.btn-organic:hover {
  transform: scale(1.05) rotate(-2deg); /* 少し大きくなって傾く */
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; /* 形が少し変わる */
  box-shadow: 0 6px 20px rgba(237, 174, 74, 0.6);
}

/* 葉っぱアイコンの動き */
.btn-organic .leaf-icon {
  font-size: 1.2rem;
  transition: transform 0.4s;
}
.btn-organic:hover .leaf-icon {
  transform: rotate(20deg) scale(1.2);
}

/* ふわふわ漂うアニメーション定義 */
@keyframes floating {
  0% {
    transform: translateY(0px);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  }
  50% {
    transform: translateY(-3px);
    border-radius: 70% 30% 60% 40% / 60% 50% 50% 40%;
  }
  100% {
    transform: translateY(0px);
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  }
}

/* =========================================
   修正版：ファーストビュー（Hero）セクション
   ========================================= */

#hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg); /* #000 から 背景色（生成り）に変更して溶け込みやすく */
  margin-bottom: 0;
  z-index: 2; /* 下のセクションより手前に表示 */
}

/* スライダー全体のコンテナ */
.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 各スライドの基本形 */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.5s ease-in-out,
    visibility 1.5s;
  display: flex;
  align-items: center;
  z-index: 1;
}

/* アクティブなスライド（表示中） */
.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* 背景画像（スライド内の子要素として配置した場合） */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -2;
}

/* 重厚感を出すオーバーレイ */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
}

/* 文字エリアのコンテナ */
.hero-inner {
  width: 100%;
  padding-left: 8%;
  z-index: 10;
  pointer-events: none; /* 下の要素を触れるように */
}

/* --- 有機的な幾何学シェイプの文字枠 --- */
.hero-text-wrap {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.25);
  /* 背景ぼかし */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display: inline-block;
  padding: 60px 80px;

  /* ★長方形をやめ、有機的な幾何学シェイプにする */
  /* お米や雲のような、少し非対称な丸み */
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;

  /* 左の直線バーをやめ、全体の柔らかな影で存在感を出す */
  border-left: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

  transform: translateX(-50px) rotate(-2deg); /* 少し傾けて「自然さ」を出す */
  opacity: 0;
  transition:
    transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 1.5s;
}

/* アクティブスライド時の動き（傾きを戻しながら登場） */
.slide.active .hero-text-wrap {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

.hero-copy {
  font-size: 4.2rem;
  line-height: 1.3;
  font-weight: 800;
  margin-bottom: 15px;
  color: #fff;
}

.hero-sub {
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* --- 下部ウェーブと農機エリア --- */
.hero-bottom-area {
  position: absolute;
  /* bottom: 0; を以下に変更 */
  bottom: -2px; /* わずかに下にずらして、下のセクションに被せる */
  left: 0;
  width: 100%;
  z-index: 20;
  pointer-events: none;
}

.ground-area {
  position: relative;
  width: 100%;
}

.wave-separator {
  line-height: 0;
  width: 100%;
}

/* SVGの表示形式も指定 */
.wave-separator svg {
  display: block; /* インライン要素特有の隙間を消す */
  width: 100%;
  /* 高さ指定は維持 */
}

/* 空飛ぶドローン */
.sky-area {
  position: absolute;
  top: -300px; /* 空の位置 */
  width: 100%;
}

/* --- 農機アニメーションの基盤（外枠の移動） --- */

/* ドローン：空の移動ルートを担当 */
.moving-drone {
  position: absolute;
  top: 100px;
  z-index: 25;
  animation: droneAdvancedFly 25s ease-in-out infinite;
}

/* トラクター：地面のルートを担当 */
.moving-tractor {
  position: absolute;
  z-index: 25;
  offset-rotate: auto; /* パスに合わせて車体を傾ける */
  offset-path: path("M0,32L60,42.7C120,53,240,75,360,74.7C480,75,600,53,720,48C840,43,960,53,1080,58.7C1200,64,1320,64,1380,64L1440,64");
  animation: tractorAlongPath 40s linear infinite;
}

/* --- 中身のアイテム（振動や見た目を担当） --- */

.drone-item,
.tractor-item {
  display: block;
  font-size: 3.5rem; /* サイズ調整 */
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
}

/* ドローンの「ホバリング振動」 */
.drone-item {
  animation: droneHoverVibrate 0.3s ease-in-out infinite alternate;
}

/* トラクターの「エンジン振動」 */
.tractor-item {
  animation: tractorEngineVibrate 0.15s linear infinite;
}

/* --- 農機アニメーション共通設定（サイズ固定） --- */

/* 外枠のサイズを明確にする */
.moving-drone,
.moving-tractor {
  width: 175px; /* PCでの基準サイズ */
  height: 175px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 中身のラッパー（span）と画像（img）を枠に合わせる */
.drone-item,
.tractor-item {
  width: 100%;
  height: 100%;
  display: block;
  font-size: 0; /* 絵文字時代の余白を消す */
}

.drone-item img,
.tractor-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 比率を保って枠に収める */
  display: block;
}

/* --- スマホ対応（サイズ調整） --- */
@media (max-width: 768px) {
  .moving-drone,
  .moving-tractor {
    width: 85px; /* スマホでは少し小さく */
    height: 85px;
  }
}

/* --- 追加のKeyframes（振動の定義） --- */

/* ドローンの上下の微細な揺れ */
@keyframes droneHoverVibrate {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

/* トラクターのガタガタした震え */
@keyframes tractorEngineVibrate {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 0);
  }
  75% {
    transform: translate(1px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ※以前作成した移動用のアニメーション（droneAdvancedFly, tractorAlongPathなど）はそのまま残してください */
/* --- アニメーション Keyframes --- */

@keyframes droneAdvancedFly {
  0% {
    left: -10%;
    transform: translate(0, 0) rotate(5deg);
  }
  25% {
    transform: translate(25vw, -50px) rotate(-10deg);
  }
  50% {
    transform: translate(50vw, 30px) rotate(5deg);
  }
  75% {
    transform: translate(75vw, -60px) rotate(-10deg);
  }
  100% {
    left: 110%;
    transform: translate(0, 0) rotate(5deg);
  }
}

@keyframes tractorAlongPath {
  0% {
    offset-distance: 100%;
    transform: scaleX(1);
  }
  100% {
    offset-distance: 0%;
    transform: scaleX(1);
  }
}

@keyframes tractorVibrate {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -3px;
  }
}

/* 背景からイラストセクションへ繋がるフェードアウト効果 */
@keyframes fadeOutScene {
  to {
    opacity: 0;
  }
}

/* スマホ対応の調整 */
@media (max-width: 768px) {
  /* スライダーの背景位置調整 */
  .slide .hero-bg {
    background-position: 65% center;
  }

  /* Heroセクションの高さ調整 */
  #hero {
    height: 75vh;
    min-height: 600px;
  }
  /* --- スライドごとの背景位置調整 --- */

  /* 1枚目：右側をできるだけ表示 */
  /* .slide:nth-child(1) は1番目のスライドを指します */
  .hero-slider .slide:nth-child(1) .hero-bg {
    background-position: 70% center; /* 100% = 右端基準 */
  }

  /* 2枚目：中央（デフォルトのまま、または必要なら調整） */
  .hero-slider .slide:nth-child(2) .hero-bg {
    background-position: center center;
  }

  /* 3枚目：左側をできるだけ表示 */
  .hero-slider .slide:nth-child(3) .hero-bg {
    background-position: 45% center; /* 0% = 左端基準 */
  }
  /* --- 1. 文字枠（ぼかし）の形を有機的に戻す --- */
  .hero-text-wrap {
    padding: 30px;
    margin: 0 15px;

    /* 単純な円から、有機的な形に戻す */
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;

    /* スマホだと文字がはみ出る場合は微調整 */
    /* width: 90%; */
  }

  /* 文字サイズもバランス調整 */
  .hero-copy {
    font-size: 1.65rem;
  }
  .hero-sub {
    font-size: 1rem;
    margin-top: 10px;
  }
  /* --- 2. トラクター・ドローンを表示させる --- */

  /* エリア自体の位置調整 */
  .hero-bottom-area {
    bottom: 0; /* 底に固定 */
    z-index: 30; /* 確実に最前面に */
  }

  /* トラクターのサイズと位置調整 */
  .moving-tractor {
    /* スマホでは少し小さく */
    width: 60px;
    height: 60px;
  }

  .tractor-item {
    font-size: 2.5rem; /* アイコンサイズ調整 */
  }

  /* ドローンのサイズ調整 */
  .moving-drone {
    top: -150px; /* 空の位置をスマホ画面内に収まるよう調整 */
    width: 50px;
    height: 50px;
  }

  .drone-item {
    font-size: 2rem;
  }

  /* ウェーブの高さを増やして、画像のはみ出しをカバーする */
  .wave-separator svg {
    height: 80px; /* 必要に応じて 100px や 120px に増やしてください */

    /* 縦横比を無視して引き伸ばし、確実にエリアを埋める */
    transform: scaleY(1.5);
    transform-origin: bottom; /* 底辺を基準に上に伸ばす */
  }

  /* ウェーブエリア自体も少し持ち上げる */
  .hero-bottom-area {
    bottom: -2px; /* 隙間防止はそのまま */
  }
}
@media (max-width: 768px) {
  /* トラクターの速度アップ */
  .moving-tractor {
    /* 40s(秒) → 12s(秒) に変更 */
    animation:
      tractorAlongPath 12s linear infinite,
      tractorEngineVibrate 0.15s linear infinite;
  }

  /* ドローンも少し速くしてテンポを良くする（任意） */
  .moving-drone {
    animation:
      droneAdvancedFly 15s ease-in-out infinite,
      droneVibrate 0.2s linear infinite;
  }
}

/* =========================================
   2. Farmer Empathy Section 
   ========================================= */
/* 下部のウェーブ */
.bottom-wave {
  position: absolute;
  bottom: 0; /* 底に固定 */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 20; /* 背景やイラストより確実に上に */
  pointer-events: none;
}

.bottom-wave svg {
  width: 100%;
  height: 80px; /* スマホでも邪魔にならない高さ */
  display: block;
}

.farmer-smile-section {
  position: relative;
  /* ★重要：波の高さ分（約100px〜120px）上に引き上げる */
  margin-top: -120px;
  padding: 80px 0 180px; /* 上の余白を少し詰め、下にゆとりを */
  /* 上に上げた分、中の文字が隠れないように内側の余白を増やす */
  padding-top: 200px;
  text-align: center;
  background-color: var(--color-bg);
  overflow: hidden;
  margin-top: -2px; /* 1〜2pxマイナスにすることで、境界の白い筋を完全に消します */
  z-index: 1; /* Heroより奥に配置 */
}

/* 3. 背景イラストの馴染ませ処理 */
/* 背景イラストの位置調整 */
.empathy-bg-deco {
  position: absolute;
  top: 0;

  /* 左にはみ出させる */
  left: -38%;

  /* はみ出した分、幅を広げる */
  width: 140%;
  height: 100%;

  background-image: url("../images/back_img_01.jpg");
  background-repeat: no-repeat;

  background-size: cover;
  background-position: center top;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
}

/* 
   背景が濃くなったため、文字の視認性を確保するために 
   タイトルと説明文の z-index を確実に上げ、
   うっすらとした「光の影（テキストシャドウ）」を微調整します。
*/
.farmer-smile-section .section-title {
  position: relative;
  z-index: 10;
  font-size: 3rem;
  line-height: 1.4;
  margin-bottom: 20px;
  color: var(--color-main);
  font-weight: 800;
  /* 背景に馴染みすぎないよう、うっすら白い光彩を入れる（任意） */
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.farmer-smile-section .section-desc {
  position: relative;
  z-index: 10;
  font-size: 1.3rem;
  color: #444; /* 少しだけ色を濃くして読みやすく */
  max-width: 800px;
  margin: 0 auto 80px;
  line-height: 1.8;
  background: rgba(252, 252, 247, 0.6); /* 説明文の背景をうっすら明るくしてイラストと分離 */
  display: inline-block;
  padding: 5px 15px;
  border-radius: 10px;
}

/* 写真や雲のコンテナもイラストより上に */
.farmer-visual-container {
  position: relative;
  max-width: 1400px; /* 1100px から 1400px に拡大 */
  width: 100%; /* 画面幅いっぱいを基準に */
  margin: 60px auto 0;
  height: 750px;
  display: flex;
  justify-content: center; /* これで写真が真ん中にきます */
  align-items: center;
  /* 重ねた分、少し位置が上がるので微調整 */
  margin-top: 40px;
  /* その他の設定は維持 */
  z-index: 10;
}

/* 中央の農家さん写真（特大お米シェイプ） */
.farmer-photo-wrap {
  position: relative; /* 中央の基準にするため、あえて absolute にしない */
  width: 550px;
  height: 650px;
  z-index: 2;
  border-radius: 60% 40% 70% 30% / 55% 65% 35% 45%;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  margin: 0 auto; /* 左右中央固定 */
}

.farmer-photo-wrap:hover {
  transform: scale(1.02); /* わずかに動くことで「生きている」感 */
}

.farmer-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像と動画の両方をカバー */
.farmer-photo-wrap img,
.farmer-photo-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいにトリミングして表示 */
  display: block;
}

/* つぶやきのアイテム（共通設定） */
.cloud-item {
  position: absolute;
  width: 280px;
  height: 160px;
  background: #fff;
  border-radius: 0;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  box-shadow: none;
  filter: drop-shadow(8px 8px 0px rgba(0, 0, 0, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-text);
  font-weight: bold;
  font-size: 1.15rem;
  line-height: 1.6;
  padding: 30px;
  z-index: 5;
  opacity: 0; /* 最初は隠す */
  transform: scale(0.8); /* 少し小さくしておく */
  animation: none;
}
.voice-clouds.active .cloud-item {
  animation: popFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- 出現タイミング（.activeがついた後の遅延） --- */
.voice-clouds.active .voice-1 {
  animation-delay: 0.2s;
}
.voice-clouds.active .voice-4 {
  animation-delay: 0.4s;
}
.voice-clouds.active .voice-2 {
  animation-delay: 0.6s;
}
.voice-clouds.active .voice-5 {
  animation-delay: 0.8s;
}
.voice-clouds.active .voice-3 {
  animation-delay: 1s;
}
/* アニメーション定義（ポン！と出る動き） */
@keyframes popFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- 出現タイミングの調整（順番に出す） --- */
/* 写真が表示された後、リズミカルに出現させる */
.voice-1 {
  top: 5%;
  left: 0%;
  animation-delay: 0.5s;
}
.voice-4 {
  top: 10%;
  right: 0%;
  animation-delay: 0.7s;
}
.voice-2 {
  top: 45%;
  right: -8%;
  z-index: 10;
  width: 320px;
  animation-delay: 0.9s;
}
.voice-5 {
  bottom: 1%;
  right: 5%;
  animation-delay: 1.1s;
}
.voice-3 {
  bottom: 5%;
  left: 5%;
  animation-delay: 1.3s;
}

/* --- ホバー時のアクション --- */
.cloud-item:hover {
  /* ホバー時は少し浮き上がり、影の色を変える */
  transform: scale(1.05) !important; /* アニメーション完了後のscale(1)から拡大 */
  filter: drop-shadow(10px 10px 0px var(--color-accent)); /* ゴールドの影に */
  color: var(--color-main);
  transition:
    transform 0.2s,
    filter 0.2s,
    color 0.2s;
}

/* --- レスポンシブの微調整（画面が狭くなった時） --- */
@media (max-width: 1400px) {
  .voice-1,
  .voice-4 {
    left: 2%;
    right: 2%;
  }
}

/* --- レスポンシブ調整（タブレットなど） --- */
@media (max-width: 1200px) {
  .farmer-visual-container {
    max-width: 1000px;
  }
  .cloud-item {
    width: 240px; /* 少し小さく */
    font-size: 1.1rem;
  }
  .voice-2 {
    right: 10%; /* 画面が狭くなったら重ねを浅くする */
  }
  .voice-1 {
    left: -50px;
  }
}
/* タブレット・スマホ対応の調整 */
@media (max-width: 1100px) {
  .farmer-photo-wrap {
    width: 450px;
    height: 550px;
  }
  .voice-2 {
    right: 20px;
  }
}

@media (max-width: 768px) {
  .empathy-bg-deco {
    /* PCでの -38% をリセット */
    left: 0;
    width: 100%;

    /* スマホでの位置調整 */
    /* イラストの右側を見せたいなら left、左側を見せたいなら right */
    background-position: center top;

    /* もしスマホでも特定の部分を見せたいなら、方法Bの応用 */
    /* left: -20%; width: 140%; など */
  }
  .farmer-smile-section .section-title {
    font-size: 1.85rem;
  }
  .farmer-smile-section .section-desc {
    font-size: 1.1rem;
    padding: 0 20px;
    margin-bottom: 50px;
  }
  /* コンテナ：縦並びにするが、窮屈にならないように */
  .farmer-visual-container {
    display: block; /* Flex解除 */
    height: auto;
    padding-bottom: 60px;
    position: relative;
  }

  /* 写真：中央に配置し、少し小さく */
  .farmer-photo-wrap {
    width: 280px;
    height: 380px;
    margin: 0 auto 50px; /* 下に余白 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  /* 奇数番目（1, 3, 5...）：左寄りに配置し、左に少し傾ける */
  .cloud-item:nth-of-type(odd) {
    margin-left: 5%;
    margin-right: auto;
    border-radius: 40% 60% 40% 60% / 50% 50% 50% 50%;
    transform: rotate(-2deg);
  }

  /* 偶数番目（2, 4...）：右寄りに配置し、右に少し傾ける */
  .cloud-item:nth-of-type(even) {
    margin-left: auto;
    margin-right: 5%;
    border-radius: 60% 40% 60% 40% / 50% 50% 50% 50%;
    transform: rotate(2deg);
    background-color: #fff; /* 重なり解消のため背景白を明示 */
  }

  /* 写真に近い雲（voice-1, voice-2）を写真に少し重ねる演出 */
  .voice-1 {
    margin-top: -30px; /* 写真の下部に食い込ませる */
    z-index: 5;
  }

  /* 矢印のような装飾（擬似要素）をつけて、下に続く感じを出す */
  .cloud-item::after {
    content: "▼";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-main);
    font-size: 0.8rem;
    opacity: 0.5;
  }
  /* 最後の雲には矢印不要 */
  .cloud-item:last-child::after {
    display: none;
  }
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .cloud-item {
    position: relative;
    margin: 15px auto;
    width: 90% !important;
    height: auto;
    min-height: 120px;
    padding: 25px;
    background: #fff;
    border-radius: 0 !important;
    -webkit-clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    box-shadow: none !important;
    filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.1));
    opacity: 0;
    transform: scale(0.9);
  }

  .cloud-item:nth-of-type(odd),
  .cloud-item:nth-of-type(even) {
    border-radius: 0 !important;
  }

  .voice-clouds.active .cloud-item {
    animation: popFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* スマホでの個別調整リセット */
  .voice-1,
  .voice-2,
  .voice-3,
  .voice-4,
  .voice-5 {
    animation-delay: 0s;
  }
  .voice-2 {
    right: auto;
    width: 90% !important;
  }
}

/* =========================================
   3. Service Section 
   ========================================= */

.service-section {
  padding: 100px 0;
  background-color: #fff; /* 清潔感のある白背景 */
}

.service-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative; /* 英語タイトルの配置基準 */
}

/* 英語の補足タイトル（装飾的配置） */
.en-title {
  display: block;
  font-family: "Oswald", sans-serif; /* 欧文書体 */
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-accent); /* 稲穂ゴールドでアクセント */
  letter-spacing: 0.2em;
  text-transform: uppercase; /* 全て大文字に */
  margin-bottom: 10px;

  /* 
       position: absolute;
       top: 50%; left: 50%;
       transform: translate(-50%, -50%);
       font-size: 6rem;
       opacity: 0.05;
       color: #000;
       z-index: 0;
       white-space: nowrap;
    */
}

/* メインタイトル */
.service-header .section-title {
  position: relative; /* z-index用 */
  z-index: 1;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-main); /* 早苗グリーン */
  line-height: 1.4;
  margin-bottom: 25px;
}

/* サブコピー */
.service-header .section-desc {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
  color: #666;
  line-height: 1.8;
}

/* --- 2行2列のグリッドレイアウト --- */
/* グリッド自体の余白を広げる */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 50px; /* 縦の隙間を大きく取る */
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* カード本体（枠線をなくし、空間で構成する） */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央揃え */
  text-align: center;
  background: transparent; /* 背景なし */
  box-shadow: none;
  border: none;
  padding-top: 20px;
}
/* --- 背景の巨大ナンバー --- */
.bg-num {
  position: absolute;

  /* 修正：中央ではなく、左上に大きくずらす */
  top: 0;
  left: -20px; /* カードの左端からはみ出させる */
  transform: none; /* 中央揃え解除 */

  font-family: "Oswald", sans-serif;
  font-size: 10rem; /* 少しだけサイズ調整 */
  font-weight: 700;
  line-height: 0.8;

  /* 中抜きではなく、薄い色でしっかり表示して視認性を上げる */
  color: #f0f6f0;
  /* -webkit-text-stroke: 2px #e0eadd; ← 中抜きはやめる */

  z-index: 0; /* 画像の後ろ */
  pointer-events: none;
  transition: all 0.4s ease;
}

/* ホバー時の変化 */
.service-card:hover .bg-num {
  color: var(--color-main); /* 色をつけて強調 */
  opacity: 0.15; /* 薄く表示 */
  transform: scale(1.1);
}
/* ホバー時の浮き上がり強化 */
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  border-color: transparent;
}

/* --- ナンバー（テキストの横にかっこよく配置） --- */
.pillar-num {
  position: static; /* 絶対配置をやめる */

  font-family: "Oswald", sans-serif;
  font-size: 3.5rem; /* 読みやすいサイズに */
  font-weight: 700;
  line-height: 0.9;

  /* 色と装飾 */
  color: var(--color-main); /* 早苗グリーン */
  opacity: 0.8;

  /* 数字の下に小さな装飾線やラベルを入れる場合 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 数字の下の装飾 */
.pillar-num::before {
  content: "Point";
  font-size: 0.8rem;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
/* --- 画像枠 --- */
.pillar-img {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 20px auto 30px;
  z-index: 2;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  overflow: hidden;
  box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.15);
  background: #fff;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 偶数番目のカードは形を変える（リズムを出す） */
.service-card:nth-child(even) .pillar-img {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.pillar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* ホバー時の画像変化 */
.service-card:hover .pillar-img {
  border-radius: 50%; /* 丸に近づく */
  transform: translateY(-15px) scale(1.05);
  box-shadow: 15px 30px 50px rgba(107, 191, 89, 0.3); /* 緑色の影 */
}
.service-card:hover .pillar-img img {
  transform: scale(1.15);
}
/* ホバー時の変化（少し浮き出るように） */
.service-card:hover .pillar-num {
  color: #e3efe3;
  transform: scale(1.1) rotate(-5deg); /* 少し動かすとオシャレ */
}

/* --- コンテンツ（画像・テキスト） --- */
.pillar-img,
.pillar-content {
  position: relative;
  z-index: 1; /* ナンバーより手前に */
}
/* --- コンテンツエリア --- */
.pillar-content {
  position: relative;
  z-index: 2;
  background: #fff; /* 背景は白 */
  padding: 30px;
  border-radius: 20px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  /* カード全体の枠線代わり */
  border: 1px solid #f0f0f0;
}

.pillar-content h4 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 15px;
  color: var(--color-text);
}
.pillar-content h4::after {
  display: none;
} /* 下線削除 */

.pillar-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #666;
  margin-bottom: 20px;
}

/* 本文のデザイン */
.pillar-content p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.9;
  margin-bottom: 25px;
  font-feature-settings: "palt"; /* 文字詰め */
}

/* --- コンテンツエリア（下部） --- */
.card-body {
  padding: 30px;
  display: flex; /* ナンバーとテキストを横並びに */
  gap: 20px;
  align-items: flex-start;
}

/* 「詳しく見る」ボタン化 */
.arrow-link {
  display: inline-block;
  padding: 10px 25px;
  background: #fff;
  color: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.arrow-link::after {
  content: "→";
  margin-left: 8px;
  font-family: Arial, sans-serif;
  transition: margin-left 0.3s;
}

.service-card:hover .arrow-link {
  background: var(--color-main);
  color: #fff;
}

.service-card:hover .arrow-link::after {
  margin-left: 12px;
}

/* =========================================
   スマホ表示の調整まとめ (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
  /* --- 共通：改行制御 --- */
  .sp-only {
    display: block;
  }

  /* --- Service Header（タイトル） --- */
  .service-header .section-title {
    font-size: 1.55rem;
  }

  /* --- Service Grid（4つの柱レイアウト） --- */
  .service-grid {
    display: flex;
    flex-direction: column;
    gap: 20px; /* カード間の隙間を狭く */
    padding: 0 15px;
  }

  /* --- Service Card（横長コンパクトデザイン） --- */
  .service-card {
    flex-direction: row; /* 横並びにする */
    align-items: center; /* 垂直中央揃え */
    text-align: left;
    padding: 15px; /* 内側の余白を小さく */
    min-height: 140px; /* 最低限の高さを確保 */
    overflow: hidden;
    gap: 0; /* flex gapは使わずmarginで調整 */

    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  /* 画像エリア（左側・小さく） */
  .pillar-img {
    width: 100px; /* 小さく固定 */
    height: 100px;
    margin: 0 15px 0 0; /* 右側に余白 */
    flex-shrink: 0; /* 縮まないように */

    border-radius: 40% 60% 40% 60% / 40% 60% 40% 60%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  }

  /* コンテンツエリア（右側） */
  .pillar-content {
    padding: 0; /* PC用の余白解除 */
    background: none;
    box-shadow: none;
    width: auto;
    border: none;
    backdrop-filter: none;
  }

  .pillar-content h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--color-main);
    justify-content: flex-start;
  }

  /* 見出しの下線（after）のリセット */
  .pillar-content h4::after {
    left: 0;
    transform: none;
    display: none; /* スマホでは線なしでシンプルに */
  }

  .pillar-content p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #666;
  }

  /* 「詳しく見る」ボタン */
  .arrow-link {
    font-size: 0.8rem;
    padding: 4px 12px;
  }

  /* 背景ナンバー（右下に配置） */
  .bg-num {
    font-size: 5rem; /* サイズダウン */
    top: auto;
    bottom: -10px;
    right: 10px;
    left: auto; /* 左配置解除 */
    color: #f4f8f4;
    opacity: 0.8;
    z-index: 0;
    transform: none !important;
  }

  /* 偶数番目の調整リセット */
  .service-card:nth-child(even) .bg-num {
    right: 10px;
    left: auto;
  }
}

/* PCのみ表示のクラス（既存のまま維持） */
@media (min-width: 769px) {
  .sp-only {
    display: none;
  }
}

/* =========================================
   4. News & Column Section
   ========================================= */

/* --- News背景アニメーション（シーン構築） --- */
.news-section {
  position: relative;
  padding-top: 200px; /* 上部に広いスペース確保 */
  padding-bottom: 100px;
  background-color: #f7f9f7;
  overflow: hidden;
  margin-bottom: 0;
  padding-bottom: 80px; /* フッターのウェーブが被る分の余白 */
}

.news-landscape-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px; /* シーンの高さ */
  z-index: 0;
  /* 地面ライン */
  border-bottom: 1px solid #e0e8e0;
}

/* 1. 遠景（上部を溶け込ませる） */
.landscape-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("../images/news_bg.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  opacity: 0.4;

  /* 上から下へ：透明(0%) → 半透明 → 完全表示(100%) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 30%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 30%, black 100%);
}

/* 農家さんの配置枠 */
.static-farmer {
  position: absolute;
  bottom: 0; /* 地面に合わせる */
  left: 15%; /* 左寄りに配置 */
  z-index: 1; /* 背景より手前 */
  width: 165px; /* ★重要：枠の幅を制限 */
  height: auto;
}

/* 農家さんの画像本体 */
.static-farmer img {
  width: 100%; /* 枠に合わせる */
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}

.farmer-icon {
  font-size: 4rem; /* サイズ */
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1)); /* 影をつけて実在感 */
  /* SVG画像にする場合 */
  /* width: 80px; height: auto; */
}
/* --- トラクターSVGのサイズ調整 --- */
.svg-tractor {
  width: 150px; /* サイズ調整 */
  height: auto;
  display: block;

  /* 上下の揺れ（バウンド） */
  animation: tractorBounce 0.3s ease-in-out infinite alternate;
}

/* 走る枠組み（移動アニメーション） */
.news-tractor-wrap {
  position: absolute;
  bottom: -5px;
  left: -100px;
  z-index: 2;
  animation: tractorRunNews 25s linear infinite;
}

/* --- タイヤの回転アニメーション --- */

/* IDセレクタを使って確実に指定 */
#後輪,
#前輪 {
  transform-box: fill-box; /* 自身の中心を基準にする */
  transform-origin: center; /* 中心で回す */
  animation: wheelSpin 1s linear infinite;
}

/* 前輪は少し速く回す */
#前輪 {
  animation-duration: 0.6s;
}

/* --- キーフレームの修正 --- */

/* 移動（左から右へ） */
/* 移動（左から右へ：反転して前進させる） */
@keyframes tractorRunNews {
  0% {
    left: -10%;
    transform: scaleX(-1); /* 左右反転して右を向かせる */
  }
  100% {
    left: 110%;
    transform: scaleX(-1); /* 最後まで右を向いたまま */
  }
}

/* タイヤ回転（反転しているため、逆回転の命令で前転に見せる） */
@keyframes wheelSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  } /* 反転環境下ではこれで前転に見える */
}

/* 上下の揺れ */
@keyframes tractorBounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3px);
  }
}

/* もしトラクターが右へ進む（反転させている）場合は、
   親要素で scaleX(-1) されているので、
   タイヤは時計回り(360deg)にする必要があります。
   tractorRunNews で scaleX(-1) しているなら、
   見た目上は逆回転に見えるかもしれないので、
   実際の動きに合わせて rotate(360deg) か rotate(-360deg) を調整してください。
*/
/* トラクター本体（前回と同じ） */
.news-tractor {
  display: block;
  font-size: 2.5rem;
  animation: tractorBounce 0.3s ease-in-out infinite alternate;
}

/* アニメーション定義（前回と同じ） */
@keyframes tractorRunNews {
  0% {
    left: -10%;
    transform: scaleX(-1);
  }
  100% {
    left: 110%;
    transform: scaleX(-1);
  }
}
@keyframes tractorBounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3px);
  }
}

/* 土煙 */
.tractor-dust {
  position: absolute;
  bottom: 5px;
  left: -10px;
  width: 8px;
  height: 8px;
  background: #ddd;
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    -15px -5px 0 -2px #ddd,
    -25px 0 0 -1px #ddd;
  animation: dustPuff 0.5s linear infinite;
}

/* --- アニメーション定義 --- */

/* 左から右へ横断 */
@keyframes tractorRunNews {
  0% {
    left: -10%;
    transform: scaleX(-1);
  } /* 左向きのアイコンなら反転させる */
  100% {
    left: 110%;
    transform: scaleX(-1);
  }
}

/* ガタガタ揺れる */
@keyframes tractorBounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3px);
  }
}

/* 土煙がポフポフ出る */
@keyframes dustPuff {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.5);
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateX(-20px) scale(1.2);
  }
}

/* コンテンツを前面に */
.news-section .container {
  position: relative;
  z-index: 2;
}
/* ヘッダー：左寄せではなく、今回は横並び（PC）にしてみる */
.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
  border-bottom: 2px solid #e0e0e0; /* ラインを引いて「区切り」を演出 */
  padding-bottom: 20px;
}

.news-header .section-title {
  font-size: 2.2rem;
  color: #333;
  margin-bottom: 10px;
}

.news-header .section-desc {
  color: #666;
  margin-right: auto;
  margin-left: 30px; /* タイトルの横に説明文 */
  margin-bottom: 10px;
}

/* 一覧を見るボタン */
.view-all-btn {
  color: var(--color-main);
  text-decoration: none;
  font-weight: bold;
  border: 1px solid var(--color-main);
  padding: 10px 25px;
  border-radius: 50px;
  transition: all 0.3s;
  background: #fff;
  margin-bottom: 5px;
}
.view-all-btn:hover {
  background: var(--color-main);
  color: #fff;
}

/* --- 記事グリッド（3カラム） --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 30px;
}

/* カード本体 */
.news-card {
  background: #fff;
  border-radius: 12px; /* 小さめの角丸でスマートに */
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.news-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* サムネイルエリア */
.news-thumb {
  position: relative; /* 子要素の基準点 */
  width: 100%;
  height: 220px !important; /* ★枠の高さをここで確定 */
  overflow: hidden; /* はみ出しをカット */
  background-color: #f0f0f0; /* 画像がない時の背景色 */
}

.news-thumb img {
  /* ★重要：絶対配置で枠の四隅に強制的に合わせる */
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.news-card:hover .news-thumb img {
  transform: scale(1.05); /* 控えめなズーム */
}

/* カテゴリタグ（画像の上に重ねる） */
.cat-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  border-radius: 4px;
  z-index: 1;
  background-color: #999;
}
.tag-notice {
  background-color: var(--color-blue) !important;
}
.tag-event {
  background: var(--color-accent);
}
.tag-column {
  background: var(--color-main);
}

/* テキストエリア */
.news-body {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-date {
  font-family: "Oswald", sans-serif; /* 数字は欧文フォント */
  font-size: 0.9rem;
  color: #999;
  margin-bottom: 10px;
  display: block;
}

.news-title {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #333;
  transition: color 0.3s;
}

.news-card:hover .news-title {
  color: var(--color-main);
}

.news-excerpt {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin-top: auto; /* 下揃えのため */

  /* 3行で省略 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
  .news-header {
    flex-direction: column;
    align-items: flex-start;
    border: none;
  }
  .news-header .section-desc {
    margin: 0 0 20px 0;
  }
  .news-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 幅に合わせて自動調整 */
  }
}

@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr; /* 完全1列 */
  }
  .news-thumb {
    height: 180px !important; /* スマホ用の高さ */
  }
}

/* =========================================
   Footer Design (Green Style)
   ========================================= */

#footer {
  position: relative;
  color: #fff;
  margin-top: 0; /* マージンをゼロにして密着させる */
}

/* --- 上部の装飾エリア（修正） --- */
.footer-top-deco {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 1;
  pointer-events: none;

  /* ★修正：背景色をNewsセクションと同じにする */
  background-color: #f7f9f7;
}

/* ウェーブのSVG（グリーン） */
.footer-wave-shape {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 100%; /* 親要素いっぱいに */
  line-height: 0;
}

.footer-wave-shape svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-wave-shape svg path {
  fill: var(--color-main); /* グリーンの波 */
}

/* 稲穂イラスト（削除または非表示） */
.footer-rice-img {
  display: none;
}

/* --- フッター本体（グリーン背景） --- */
.footer-body {
  background-color: var(--color-main); /* 早苗グリーン */
  padding: 40px 0 20px;
}

/* （以下のレイアウト設定は前回と同じですが、念のため掲載） */

/* 上段レイアウト */
.footer-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* ロゴエリア */
.footer-brand {
  text-align: left;
}
.footer-logo {
  font-size: 2.2rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.footer-tagline {
  font-size: 0.9rem;
  opacity: 0.9;
  letter-spacing: 0.1em;
}

/* 連絡先エリア */
.footer-contact-info {
  text-align: right;
}
.footer-contact-info .address {
  font-size: 0.9rem;
  margin-bottom: 5px;
}
.tel-row {
  font-family: "Oswald", sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 20px;
}
.tel-row .tel {
  margin-right: 15px;
}

/* お問い合わせボタン（白背景・グリーン文字） */
.footer-cta-btn {
  display: inline-block;
  background: #fff;
  color: var(--color-main); /* 文字色もグリーンに */
  font-weight: bold;
  padding: 12px 40px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}
.footer-cta-btn:hover {
  transform: translateY(-2px);
  color: var(--color-main);
}

/* リンクメニュー */
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}
.footer-links a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  opacity: 0.9;
}
.footer-links a:hover {
  text-decoration: underline;
}

/* 下段（SNS・コピーライト） */
.footer-bottom-row {
  text-align: center;
}
/* --- SNSアイコン（SVG）のデザイン --- */
.footer-social {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  gap: 15px; /* アイコン間の余白 */
}

.footer-social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px; /* クリックしやすいサイズ */
  height: 44px;
  background: rgba(255, 255, 255, 0.15); /* 薄い背景 */
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social a svg {
  width: 20px; /* アイコン自体のサイズ */
  height: 20px;
  fill: currentColor; /* 親の文字色を継承 */
}

/* ホバー時のエフェクト */
.footer-social a:hover {
  background: #fff;
  color: var(--color-main); /* 背景が白になり、アイコンがグリーンに */
  transform: translateY(-3px);
}
.copyright {
  font-family: "Oswald", sans-serif;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .footer-main-row {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  .footer-brand,
  .footer-contact-info {
    text-align: center;
  }
  .footer-links {
    flex-direction: column;
    gap: 15px;
  }
}

/* レスポンシブ対応 (SP) */
@media (max-width: 768px) {
  .header-inner {
    padding: 10px 15px;
    gap: 15px;
  }
  .global-nav {
    display: none; /* SPでは一旦非表示（ハンバーガー実装時はここを制御） */
  }
}

/* =========================================
   フッターロゴのサイズ調整
   ========================================= */

.footer-logo img {
  width: auto;
  height: auto;

  max-width: 225px;
  max-height: 175px;

  object-fit: contain;
  display: block;
}

/* スマホでは少し小さく */
@media (max-width: 768px) {
  .footer-logo img {
    max-width: 150px;
    margin: 0 auto; /* 中央寄せ */
  }
}

/* =========================================
   Responsive & Tablet Support
   ========================================= */

/* =========================================
   Tablet / SP Fix (Max-width: 1100px)
   ========================================= */
@media (max-width: 1100px) {
  /* 1. PC用のメニューとボタンを「完全に」消す */
  .pc-nav {
    display: none !important;
  }

  /* ヘッダー内のPC用ボタン(.btn-organic)を消す */
  .header-right .btn-organic {
    display: none !important;
  }

  /* 2. ヘッダーの余白をスマホ用に調整 */
  .header-container {
    padding: 15px 20px; /* 左右の余白を狭く */
  }

  /* 3. ハンバーガーメニューの位置調整 */
  .header-right {
    /* ボタンが消えたので、ハンバーガーだけが残る */
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .hamburger {
    display: block;
    margin-left: auto; /* 念のため右寄せ */
  }
}

/* =========================================
   SP/Tablet Menu Design (Rich Style)
   ========================================= */
.sp-nav {
  /* (既存の配置指定はそのまま) */
  background: #fcfcf7; /* 生成り色 */
  overflow-y: auto; /* 縦スクロール可能に */
}

.sp-nav-inner {
  padding: 80px 30px 40px; /* 上はハンバーガーとかぶらないよう広めに */
  width: 100%;
  max-width: 500px; /* タブレットで広がりすぎないように */
  position: relative;
}

/* 背景装飾（うっすら円形など） */
.sp-bg-deco {
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  background: var(--color-main);
  opacity: 0.1;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.sp-menu-title {
  font-size: 0.9rem;
  color: #999;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

/* メインリンク（リスト） */
.sp-main-links {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}
.sp-main-links li {
  margin-bottom: 15px;
}
.sp-main-links a {
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-main-links a::after {
  content: "›"; /* 矢印 */
  color: #ccc;
  font-weight: normal;
}
/* ドローン事業だけ少し目立たせる */
.sp-main-links a.highlight {
  color: var(--color-main);
}

/* 3つの柱（グリッド） */
.sp-sub-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #555;
}

/* =========================================
   スマホメニュー内：サービスグリッド修正（1カラム）
   ========================================= */

.sp-service-grid {
  display: flex;
  flex-direction: column; /* 1カラム（縦並び）に変更 */
  gap: 12px; /* 項目間の隙間 */
  margin-bottom: 40px;
}

.sp-service-item {
  display: flex; /* 横並びにする */
  flex-direction: row; /* アイコンとテキストを横に配置 */
  align-items: center; /* 垂直中央揃え */
  justify-content: flex-start; /* 左寄せ */

  background: #fff;
  border-radius: 12px; /* 角丸 */
  padding: 15px 20px; /* 内側の余白 */
  text-decoration: none;
  color: #333;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: background 0.2s;
}

.sp-service-item:active {
  background: #f0f7f0; /* タップした時に少し色が変わる演出 */
  transform: scale(0.98);
}

/* アイコンの調整 */
.sp-service-item .icon {
  font-size: 1.6rem; /* サイズを少し調整 */
  margin-bottom: 0; /* 下マージンを消す */
  margin-right: 15px; /* 右側に余白を作る */
  width: 40px; /* 幅を固定してテキスト開始位置を揃える */
  text-align: center;
}

/* テキストの調整 */
.sp-service-item .text {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* 矢印（>）を右端に付けてリスト感を出す（任意） */
.sp-service-item::after {
  content: "›";
  margin-left: auto; /* 右端へ */
  color: #ccc;
  font-size: 1.2rem;
}

/* SP内ボタン */
.sp-cta-area {
  text-align: center;
}
.sp-btn {
  width: 100%; /* 幅いっぱいに */
  box-sizing: border-box;
  padding: 18px;
  font-size: 1.1rem;
}

/* --- 3列グリッドの指定 --- */
.service-grid.three-cols {
  display: grid;
  /* PC・タブレットで3列 */
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; /* カード同士の間隔 */
  max-width: 1200px; /* コンテナを少し広めに取る */
  margin: 0 auto;
}

/* --- カード内デザインの微調整 --- */
.service-card {
  /* 以前の設定を継承しつつ、幅に合わせて調整 */
  padding-top: 20px;
}

.pillar-img {
  width: 100%;
  max-width: 320px; /* カード幅に合わせて最大サイズを調整 */
  height: 240px;
  margin: 0 auto 25px;
  /* 有機的シェイプは継続 */
}

/* ナンバーの位置調整（3列時にテキストと被りすぎないように） */
.bg-num {
  font-size: 8rem; /* 4列時より少し小さくしてバランスを取る */
  top: -20px;
  left: -10px;
}

.pillar-content h4 {
  font-size: 1.3rem; /* 文字サイズ調整 */
  margin-bottom: 12px;
}

.pillar-content p {
  font-size: 0.9rem;
  line-height: 1.7;
}

/* --- タブレット・スマホ対応 --- */

/* 1024px以下でも3列を維持する場合の調整 */
@media (max-width: 1100px) {
  .service-grid.three-cols {
    gap: 20px;
    padding: 0 15px;
  }
  .bg-num {
    font-size: 6rem;
  }
  .pillar-content h4 {
    font-size: 1.1rem;
  }
}

/* 768px以下は、以前作成した「横長1カラム」のデザインを適用 */
@media (max-width: 768px) {
  .service-grid.three-cols {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

/* =========================================
   3. Service Section (ワイド・3カラム統合版)
   ========================================= */

.service-section {
  padding: 100px 0;
  background-color: #fff;
  /* ナンバーが画面からはみ出さないように */
  overflow: hidden;
}

/* セクション全体の幅を広げる（重要） */
.service-section .container {
  max-width: 1400px !important;
  width: 95%;
  margin: 0 auto;
}

.service-header {
  text-align: center;
  margin-bottom: 80px;
}

.service-header .section-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-main);
  line-height: 1.4;
  margin-bottom: 25px;
}

@media (max-width: 768px) {
  .service-header .section-title {
    font-size: 2rem;
  }
}

/* --- 3列グリッドレイアウト --- */
.service-grid {
  display: grid;
  /* PC・タブレットで3列一行に固定 */
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 0 auto;
}

/* --- カード本体 --- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  padding-top: 40px; /* ナンバーのための上部余白 */
  border: none;
}

/* --- 背景ナンバー--- */
.bg-num {
  position: absolute;
  top: -70px;
  left: 0;
  right: auto;
  transform: none;

  font-family: "Oswald", sans-serif;
  font-size: 10rem;
  font-weight: 700;
  line-height: 0.8;
  color: #f0f6f0;
  z-index: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

/* ホバー時の挙動 */
.service-card:hover .bg-num {
  color: var(--color-main);
  opacity: 0.15;
  transform: translateY(-10px);
}

/* --- 有機的な画像枠 --- */
.pillar-img {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 280px;
  margin: 0 auto 30px;
  z-index: 2;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  overflow: hidden;
  box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.1);
  background: #fff;
  transition: all 0.5s ease;
}

/* 2番目の画像のみ形を反転（リズム用） */
.service-grid .service-card:nth-child(2) .pillar-img {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.pillar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.service-card:hover .pillar-img img {
  transform: scale(1.1);
}

/* --- テキストコンテンツ --- */
.pillar-content {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 35px 30px;
  border-radius: 20px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  text-align: left; /* 説明文は左寄せ */
}

.pillar-content h4 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 15px;
  color: #333;
  text-align: center; /* タイトルは中央 */
}

.pillar-content p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #666;
}

/* --- レスポンシブ調整（中画面・タブレット） --- */
@media (max-width: 1200px) {
  .service-section .container {
    max-width: 1000px !important;
  }
  .bg-num {
    font-size: 7rem;
  }
  .pillar-img {
    height: 220px;
  }
  .pillar-content {
    padding: 25px;
  }
  .pillar-content h4 {
    font-size: 1.2rem;
  }
}

/* --- スマホ表示 (横長コンパクトデザイン) --- */
@media (max-width: 768px) {
  .service-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
  }

  .service-card {
    flex-direction: row; /* 横並び */
    padding: 15px;
    min-height: 140px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
  }

  .pillar-img {
    width: 100px;
    height: 100px;
    margin: 0 15px 0 0;
    flex-shrink: 0;
    border-radius: 40% 60% 40% 60% / 40% 60% 40% 60% !important;
  }

  .pillar-content {
    padding: 0;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .pillar-content h4 {
    text-align: left;
    font-size: 1.1rem;
    margin-bottom: 5px;
  }

  .pillar-content p {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  /* スマホのナンバーは右下に小さく配置 */
  .bg-num {
    font-size: 4rem;
    top: auto;
    bottom: -5px;
    right: 5px;
    left: auto;
    opacity: 0.1;
  }
}

/* --- ドロップダウンメニュー（テキストのみ・シンプル版） --- */

.dropdown-menu {
  /* ...既存の枠設定はそのまま... */
  padding: 10px 0;
  width: 240px; /* 文字数に合わせて幅を少し調整 */
}

.dropdown-menu a {
  display: block; /* フレックス解除 */
  padding: 12px 25px; /* クリックしやすい広めの余白 */
  font-size: 0.95rem; /* 読みやすいサイズ */
  font-weight: 500;
  color: #333 !important;
  text-decoration: none;
  transition: all 0.2s ease;

  /* アイコンがない分、少し左にアクセントをつける */
  border-left: 3px solid transparent;
}

.dropdown-menu a:hover {
  background-color: #f7f9f7; /* 薄いグレー/グリーン */
  color: var(--color-main) !important;
  border-left-color: var(--color-main); /* ホバー時に左線を表示 */
  padding-left: 30px; /* 少し右に動く演出 */
}

/* --- スマホメニュー（テキストのみ） --- */

@media (max-width: 768px) {
  .sp-service-item {
    display: block;
    padding: 18px 20px;
    text-align: left;
  }

  /* アイコン削除に伴う調整 */
  .sp-service-item .icon {
    display: none;
  }

  .sp-service-item .text {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
  }

  /* 矢印は残して「遷移すること」を伝える */
  .sp-service-item::after {
    content: "›";
    float: right;
    color: #ccc;
    font-weight: normal;
  }
}

/* --- Scene 1.5: メッセージ (英文追加版) --- */

/* ラッパー（位置調整用） */
.message-inner {
  position: relative;
  display: inline-block; /* 中身に合わせて幅を決定 */
}

/* 和文（既存の設定＋位置調整） */
.loading-copy {
  position: relative;
  z-index: 2;
  /* 全体の文字間を少し詰める */
  letter-spacing: 0.05em;
  margin-bottom: 10px; /* 英文との間隔 */
}

/* 句読点の詰め調整（個別に指定） */
/* 「、」の後ろを詰める */
.loading-copy .char:nth-of-type(4) {
  /* 「、」 */
  margin-right: -0.4em;
}

/* 「。」の前を詰める */
.loading-copy .char:nth-of-type(7) {
  /* 「。」 */
  margin-left: -0.2em;
}

/* --- 英文の配置 --- */
.loading-sub {
  font-family: "Great Vibes", cursive;
  font-size: 3.5rem;
  font-weight: bold;
  color: var(--color-accent);
  position: relative;
  display: block;
  margin-top: -15px; /* 和文に近づける */
  margin-left: 20px; /* 全体を少し右にずらしてバランスを取る */
  text-align: center;
  /* 傾斜をつける */
  transform: rotate(-5deg);
  transform-origin: center center;
  white-space: nowrap;
  width: 100%;
  opacity: 0;
  animation: scriptFadeIn 1.5s ease-out forwards;
  animation-delay: 3.8s;
}

/* アニメーション定義（傾斜を維持しながら出現） */
@keyframes scriptFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) rotate(-5deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-5deg) scale(1);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .loading-copy {
    font-size: 2rem;
  }
  .loading-sub {
    font-size: 2rem;
    margin-top: 0;
  }
}