/* =========================================
   下層ページ共通 (page.css)
   ========================================= */

/* --- ページヘッダー --- */
.page-header {
  position: relative;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  background-color: #333;
  margin-top: 0;
}

.page-header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ここに下層ページ共通、または個別の背景画像を指定 */
  background-image: url("../images/robot_header.jpg");
  background-color: var(--color-main); /* 画像がない場合のグリーン */
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  z-index: 0;
}
/* ブルーのグラデーションマスク */
.page-header-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(30, 144, 255, 0.7) 0%, /* 上部：ドジャーブルー系のしっかりした青 */ rgba(135, 206, 235, 0.5) 60%, /* 中部：スカイブルー */ rgba(135, 206, 235, 0.2) 100% /* 下部：明るく透ける */);

  z-index: 1; /* 画像より上 */
}
.page-title {
  position: relative;
  z-index: 2;
  text-align: center;
}
.page-title .en {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); /* 影を濃く */
  margin-bottom: 10px;
  font-weight: 700; /* 太くする */
}
.page-title .ja {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* 2. ウェーブ（スキャナーより上に上げる） */
.page-header-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  /* ★修正：z-indexをスキャナー(3)より大きい数値（例: 5）にする */
  z-index: 5;
}
.page-header-wave svg path {
  fill: #fff;
}

.breadcrumb-area {
  background-color: #ffffff;
  margin: 0;
  padding: 15px 0 5px;
  border: none;
}

.breadcrumb {
  display: flex;
  list-style: none;
  font-size: 0.85rem;
  /* 文字色を少し薄くして、主張を抑える */
  color: #999;
  padding: 0;
  margin: 0;
}

.breadcrumb li a {
  text-decoration: none;
  color: #999;
  transition: color 0.3s;
}

.breadcrumb li a:hover {
  color: var(--color-main);
}

/* 区切り文字「>」の調整 */
.breadcrumb li:not(:last-child)::after {
  content: "/"; /* 矢印よりスラッシュの方が溶け込みやすい場合があります */
  margin: 0 12px;
  color: #ddd;
  font-size: 0.7rem;
}

/* 現在地の文字を少しだけ濃くする */
.breadcrumb li span {
  color: #666;
}

/* --- スマホ表示の最終調整 --- */
@media (max-width: 768px) {
  .breadcrumb-area {
    /* スマホでも背景色を維持 */
    background-color: #ffffff;
    padding: 10px 0 0; /* 下の余白をさらに詰める */
  }

  .breadcrumb {
    padding: 0 20px;
    /* 横スクロールしても背景が途切れないように */
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* --- 共通セクション余白 --- */
.section-padding {
  padding: 80px 0;
}

/* .sub-intro { text-align: center; max-width: 800px; margin: 0 auto; } */
/* --- イントロダクション --- */
.sub-intro {
  text-align: left; /* 中央揃えをやめる */
  max-width: none; /* ★幅制限を解除 */
  margin: 0; /* マージンリセット */
  /* padding等は維持 */
}

.sub-intro .container {
  max-width: 1200px; /* 800pxから広げる（サイト共通幅に合わせる） */
  margin: 0 auto;
}
.intro-heading {
  font-size: 2rem;
  color: var(--color-main);
  margin-bottom: 30px;
  line-height: 1.5;
  font-weight: 800;
}

/* =========================================
   Features (ジグザグレイアウト)
   ========================================= */
.bg-gray {
  background-color: #f7f9f7;
}

.feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 80px;
  gap: 50px;
}
.feature-item:last-child {
  margin-bottom: 0;
}

/* 逆配置（画像右、文字左） */
.feature-item.reverse {
  flex-direction: row-reverse;
}

/* 画像エリア */
/* --- 画像エリアの親（バッジをはみ出させるため overflow: visible） --- */
.feature-img {
  position: relative;
  width: 48%;
  height: 380px;
  overflow: visible; /* バッジを外側にはみ出させる */
}

/* 画像を切り抜くためのインナー枠 */
.img-clipper {
  width: 100%;
  height: 100%;
  border-radius: 60% 40% 70% 30% / 55% 65% 35% 45%; /* お米シェイプ */
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.img-clipper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ★左上のインパクトバッジ --- */
.feature-impact-badge {
  position: absolute;
  /* 画像の左上に大胆に重ねて配置 */
  top: -20px;
  left: -20px;
  z-index: 10;

  /* サイズと形状 */
  width: 90px;
  height: 90px;
  background-color: var(--color-accent); /* 稲穂ゴールド */
  /* バッジ自体も少し有機的な角丸に */
  border-radius: 20px 5px 20px 5px;

  /* タイポグラフィ（Oswaldを使用） */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 2.8rem;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1;

  /* 強い影で浮き立たせる */
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.15);

  /* 登場感のある微細な傾き */
  transform: rotate(-5deg);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ホバー時にバッジが反応する（インパクト） */
.feature-item:hover .feature-impact-badge {
  transform: rotate(0deg) scale(1.1);
  background-color: var(--color-main); /* 緑に変化して「選んでいる」感を出す */
}

/* --- テキストエリア（見出しの調整） --- */
.feature-txt h3 {
  font-size: 2rem;
  color: #333;
  font-weight: 800;
  margin-bottom: 20px;
  /* 余計な下線や装飾はなし */
  border: none;
  padding: 0;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .feature-img {
    width: 100%;
    height: 280px;
    margin-bottom: 40px;
  }
  .feature-impact-badge {
    width: 70px;
    height: 70px;
    font-size: 2rem;
    top: -15px;
    left: 0; /* スマホでは画面端に合わせて調整 */
  }
}
.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.feature-item:hover .feature-img img {
  transform: scale(1.05);
  transform: scale(1.85);
}

/* ナンバー装飾 */
.feature-num {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: "Oswald", sans-serif;
  font-size: 4rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  line-height: 1;
}

/* テキストエリア */
.feature-txt {
  width: 45%;
}
/* テキストエリアの見出し */
.feature-txt h3 {
  font-size: 1.65rem;
  color: #333;
  margin-bottom: 20px;
  font-weight: 800;
  line-height: 1.4;
  display: inline-block;
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: 8px;

  /* 2行になった時のための微調整 */
  max-width: 100%; /* 親要素からはみ出さない */
  word-break: break-word; /* 長い単語での崩れ防止 */
}
.feature-txt .lead {
  font-weight: bold;
  color: var(--color-main);
  font-size: 1.2rem;
  margin-bottom: 15px;
}
.feature-txt p {
  line-height: 1.8;
  color: #666;
}

/* --- メリットエリア --- */
.block-title {
  text-align: center;
  font-size: 2rem;
  color: var(--color-main);
  margin-bottom: 50px;
  font-weight: 800;
}
.merit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.merit-card {
  background: #fff;
  padding: 40px 20px;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}
.merit-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}
.merit-card h4 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #333;
  font-weight: 700;
}
.merit-card p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
}

/* --- CTA --- */
.sub-cta {
  margin-bottom: 80px;
}
.cta-box {
  background: #eef7ee; /* 薄いグリーン */
  padding: 60px 20px;
  text-align: center;
  border-radius: 30px;
}
.cta-box h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--color-main);
  font-weight: 800;
}
.cta-box p {
  margin-bottom: 30px;
  color: #555;
}

/* --- スマホ対応 (Page) --- */
@media (max-width: 768px) {
  /* --- 1. ヘッダー被り・白い空間の修正 --- */
  .page-header {
    margin-top: 0 !important;
    padding-top: 100px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* 背景画像を画面の最上部(top:0)に密着させる */
  .page-header-bg {
    top: 0;
    height: 100%;
    background-position: center top; /* 画像の上部を基準にする */
  }

  .breadcrumb {
    display: flex; /* 横並び維持 */
    padding: 0 15px; /* 端に余白 */
    font-size: 0.8rem; /* 文字サイズ縮小 */
  }

  /* 矢印の間隔調整 */
  .breadcrumb li:not(:last-child)::after {
    margin: 0 5px;
  }

  /* スクロールバーを隠す（見た目重視の場合） */
  .breadcrumb-area::-webkit-scrollbar {
    display: none;
  }
  .page-title .ja {
    font-size: 1.8rem;
  }

  .feature-item,
  .feature-item.reverse {
    flex-direction: column; /* 縦積みに */
    gap: 30px;
    margin-bottom: 60px;
  }
  .feature-img,
  .feature-txt {
    width: 100%;
  }
  .feature-img {
    height: 250px;
  }

  .merit-grid {
    grid-template-columns: 1fr;
  }

  .intro-heading {
    font-size: 1.5rem;
  }
  .intro-text {
    text-align: left;
  }
}

/* ------------------------------------------ */
/* --- イントロダクション背景アニメーション --- */
.sub-intro {
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

.intro-anim-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 文字選択の邪魔をしない */
  z-index: 0;
}

/* コンテンツを前面に */
.sub-intro .container {
  position: relative;
  z-index: 1;
}

/* 左の芽（ゆらゆら揺れる） */
.anim-sprout {
  position: absolute;
  bottom: 20px;
  left: 10%;
  font-size: 4rem; /* 画像ならwidth指定 */
  opacity: 0.2;
  transform-origin: bottom center;
  animation: swaySprout 3s ease-in-out infinite alternate;
}

/* 右のドローン（浮遊する） */
.anim-drone {
  position: absolute;
  top: 20px;
  right: 10%;
  font-size: 3rem;
  opacity: 0.15;
  animation: floatDrone 5s ease-in-out infinite;
}

/* 下部のデータライン（流れる） */
.anim-wave-line {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 200%; /* 画面より長く */
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-main), transparent);
  opacity: 0.3;
  animation: flowLine 8s linear infinite;
}

/* --- Keyframes --- */

@keyframes swaySprout {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes floatDrone {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes flowLine {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* --- イントロダクション背景アニメーション（人物版） --- */

/* 左のドローン操縦者 */
.anim-operator-drone {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 200px; /* イラストサイズ */
  opacity: 0.8; /* うっすらではなく、しっかり見せるなら1.0 */
  z-index: 0;

  /* 呼吸するように少し揺れる */
  animation: breathAnim 4s ease-in-out infinite alternate;
}

/* 右のトラクター運転者 */
.anim-operator-tractor {
  position: absolute;
  bottom: 20px;
  right: 5%;
  width: 250px;
  opacity: 0.8;
  z-index: 0;

  /* ゆっくり前進して戻る（作業中のイメージ） */
  animation: tractorSlowMove 10s ease-in-out infinite alternate;
}

/* --- Keyframes --- */

@keyframes breathAnim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.02);
  }
}

@keyframes tractorSlowMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-30px);
  }
}

/* テキストの読みやすさ確保 */
.intro-text {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.8); /* 文字の背景を白くぼかす */
  backdrop-filter: blur(5px);
  padding: 30px;
  border-radius: 20px;
  display: inline-block; /* 幅に合わせて */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .anim-operator-drone,
  .anim-operator-tractor {
    width: 120px;
    opacity: 0.3; /* スマホでは文字と被るため薄く */
  }
}

/* =========================================
   イントロダクション（リッチデザイン・動き付き）
   ========================================= */

.sub-intro {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  z-index: 1;
}

/* --- 背景の動く装飾（流体シェイプ） --- */
.intro-bg-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.blob-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px); /* ふんわりぼかす */
  opacity: 0.4;
  animation: blobMove 20s infinite alternate;
}

.blob-1 {
  top: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: #eef9ee; /* 薄いグリーン */
}

.blob-2 {
  bottom: -10%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: #fff8e6; /* 薄いイエロー */
  animation-delay: -5s;
}

@keyframes blobMove {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(50px, 50px) scale(1.1);
  }
}

/* --- レイアウト枠 --- */
.intro-flex-layout {
  position: relative;
  z-index: 1; /* 背景より上に */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* --- 左側：テキストエリア --- */
.intro-text-area {
  position: relative;
  flex: 1;
}

/* 背景の巨大文字 */
.bg-en-text {
  position: absolute;
  top: -60px;
  left: -20px;
  font-family: "Oswald", sans-serif;
  font-size: 6rem;
  font-weight: 700;
  color: #f2f7f2; /* 極薄い色 */
  z-index: -1;
  line-height: 1;
  white-space: nowrap;
}

.intro-heading {
  font-size: 2.4rem;
  color: var(--color-main);
  margin-bottom: 40px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.05em;

  /* 下線アニメーション（読み込み時に伸びる） */
  position: relative;
  display: inline-block;
}
@media (max-width: 768px) {
  .intro-heading {
    font-size: 1.5rem;
  }
}
.intro-heading::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 80px;
  width: 300px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 2px;
}

.intro-text {
  font-size: 1rem;
  line-height: 2.2; /* ゆったりと */
  color: #444;
  font-weight: 500;
  letter-spacing: -0.35px;
}

/* --- 右側：画像エリア --- */
.intro-image-area {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 画像の後ろの円（アクセント） */
.image-back-circle {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 60% 40% 70% 30% / 55% 65% 35% 45%;
  background-color: var(--color-main);
  opacity: 0.1;
  z-index: 0;
  animation: rotateBlob 20s linear infinite; /* ゆっくり回転 */
}

/* 画像本体（くっきり見せつつ形を有機的に） */
.organic-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 550px;
  height: auto;

  /* ぼかしマスク廃止 → お米シェイプで切り抜く */
  border-radius: 60% 40% 70% 30% / 55% 65% 35% 45%;

  /* 影をつけて浮遊感 */
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.15);

  /* ふわふわ浮くアニメーション */
  animation: gentleFloat 6s ease-in-out infinite;
}

/* --- アニメーション定義 --- */
@keyframes rotateBlob {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes gentleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
  .intro-flex-layout {
    flex-direction: column-reverse; /* 画像上、文字下 */
    gap: 40px;
  }

  .bg-en-text {
    font-size: 4rem;
    font-size: 3.95rem;
    top: -40px;
  }

  .intro-image-area {
    width: 100%;
  }
  .organic-img {
    max-width: 100%;
  }
}

/* --- 設備紹介セクションのベース設定 --- */
.features-list {
  position: relative;
  /* 上部の余白を、波の高さ分（約100px）さらに広げる */
  padding-top: 150px !important;
  background-color: #f7f9f7; /* bg-grayの色 */
}

/* セクション上部のウェーブ装飾 */
.section-wave-top {
  position: absolute;
  top: -1px; /* 隙間防止 */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
}

.section-wave-top svg {
  width: 100%;
  height: 100px; /* 波の高さ */
}

/* コンテンツ（タイトル等）が波より前に来るように */
.features-list .container {
  position: relative;
  z-index: 2;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .features-list {
    padding-top: 100px !important;
  }
  .section-wave-top svg {
    height: 60px; /* スマホでは波を少し低く */
  }
}

/* --- メリットセクションのベース設定 --- */
.sub-merit {
  position: relative; /* 疑似要素の基準点 */
  background-color: #ffffff;
  padding-top: 150px !important;
  padding-bottom: 120px;
  /* はみ出したロゴをきれいにカットする */
  overflow: hidden;
  z-index: 1;
}
/* 右側に配置する透かしロゴ */
.sub-merit::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: 5%;
  /* サイズ：セクションの高さに合わせて大きく配置 */
  width: 600px;
  height: 500px;
  background-image: url("../images/back_logo.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.04;
  /* わずかに傾斜させてデザインにリズムを作る */
  transform: rotate(-8deg);
  z-index: 0; /* カードの裏側 */
  pointer-events: none; /* クリックや選択を邪魔しない */
}
/* コンテンツがロゴの上に埋もれないよう、階層を上げる */
.sub-merit .container {
  position: relative;
  z-index: 2;
}
/* セクションタイトル：メリット */
.sub-merit .block-title {
  font-size: 2.4rem;
  color: var(--color-main);
  margin-bottom: 60px;
  font-weight: 800;
}

/* --- メリットカードのデザイン調整 --- */
.merit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
  z-index: 2;
}

.merit-card {
  background: #fff;
  padding: 50px 30px;
  text-align: center;
  border-radius: 24px;
  /* 幾何学的で柔らかい影 */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.merit-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(107, 191, 89, 0.1);
  border-color: var(--color-main);
}

.merit-icon {
  font-size: 3.5rem;
  margin-bottom: 25px;
  display: block;
}

.merit-card h4 {
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #333;
  font-weight: 800;
  /* 重要なキーワードに少しアクセント */
  position: relative;
}

.merit-card p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.8;
  text-align: left; /* 本文は左寄せが読みやすい */
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .sub-merit {
    padding-top: 100px !important;
  }
  .sub-merit::after {
    width: 300px;
    height: 250px;
    right: -10%;
    bottom: 2%;
    opacity: 0.03;
  }
  .sub-merit .block-title {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }
  .merit-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .merit-card {
    padding: 40px 20px;
  }
  .merit-card h4 br {
    display: none; /* スマホでは改行しない */
  }
}

/* --- 自然なアイコンのコンテナ --- */
.merit-icon-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 背景のお米シェイプ（淡い色） */
.icon-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* お米のような少し歪んだ丸 */
  border-radius: 60% 40% 70% 30% / 55% 65% 35% 45%;
  opacity: 0.2;
  z-index: 1;
  transition: transform 0.6s ease;
}

/* 各アイコン個別の色設定 */
.bg-water {
  background-color: var(--color-blue);
}
.bg-human {
  background-color: var(--color-main);
}
.bg-rice {
  background-color: var(--color-accent);
}

/* ホバー時に背景の形がゆっくり変わる（自然な動き） */
.merit-card:hover .icon-bg {
  transform: rotate(15deg) scale(1.1);
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}

/* ラインアートアイコン本体 */
.organic-icon {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  color: var(--color-main); /* 基本は早苗グリーン */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05));
}

/* 水管理はブルーに */
.merit-card:nth-child(1) .organic-icon {
  color: #5a9cb5;
}
/* 収益性はゴールドに */
.merit-card:nth-child(3) .organic-icon {
  color: #d49835;
}

/* =========================================
   CTAエリア（スタッフイラスト付き）
   ========================================= */
.sub-cta {
  margin-bottom: 100px;
  padding: 0 20px;
}

/* カード全体 */
.cta-card {
  background-color: #eef7ee; /* 薄いグリーン */
  border-radius: 40px;
  display: flex;
  align-items: flex-end; /* 下揃え（地面に立っている感じ） */
  justify-content: space-between;
  overflow: hidden;
  padding: 0 60px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* 左側：スタッフのイラスト */
.cta-staff-img {
  flex: 0 0 300px; /* 幅を固定 */
  margin-bottom: -10px; /* 地面から少し浮かせる場合は調整 */
  z-index: 2;
}

.cta-staff-img img {
  width: 100%;
  height: auto;
  display: block;
  /* 軽く浮遊感を出して「生き生きとした感じ」に */
  animation: ctaStaffFloat 4s ease-in-out infinite;
}

/* 右側：コンテンツ */
.cta-content {
  flex: 1;
  padding: 60px 0 60px 40px;
  text-align: left;
  z-index: 2;
}

.cta-content h3 {
  font-size: 1.8rem;
  color: var(--color-main);
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.4;
}

.cta-content p {
  font-size: 1rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 35px;
}

/* ボタンの配置 */
.cta-btn-wrap {
  text-align: left;
}

/* スタッフの浮遊アニメーション */
@keyframes ctaStaffFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
  .cta-card {
    flex-direction: column; /* 縦並びに */
    align-items: center;
    padding: 40px 30px;
    text-align: center;
  }

  .cta-staff-img {
    flex: 0 0 auto;
    width: 180px; /* スマホでは少し小さく */
    margin-bottom: 20px;
  }

  .cta-content {
    padding: 0;
    text-align: center;
  }

  .cta-content h3 {
    font-size: 1.4rem;
  }

  .cta-btn-wrap {
    text-align: center;
  }
}

/* =========================================
   セクション間の色の段差を解消する修正
   ========================================= */

/* 1. CTAセクション自体の設定 */
.sub-cta {
  background-color: #ffffff; /* 確実に白に設定 */
  margin-bottom: 0; /* フッターとの隙間を消す */
  padding-bottom: 120px; /* フッターのウェーブが被るための余白 */
  position: relative;
  z-index: 1;
}

/* 2. フッター上部の背景色を白に書き換え */
#footer {
  margin-top: 0; /* マージンをゼロにして密着させる */
}

.footer-top-deco {
  /* 以前設定した #f7f9f7 から #ffffff に変更 */
  background-color: #ffffff !important;

  /* ウェーブの高さを調整 */
  top: -60px;
  height: 60px;
}

/* ウェーブの形を CTA セクションに綺麗に重ねる */
.footer-wave-shape {
  bottom: -1px;
}

.footer-wave-shape svg path {
  fill: var(--color-main); /* フッターの緑色 */
}

/* --- DXページ専用のヘッダー画像背景（任意） --- */
.dx-header-bg {
  background-image: url("../images/hero_dx.jpg");
}

/* イントロの背景テキストをDX用に調整 */
.sub-intro .bg-en-text {
  color: #f0f4f7; /* 少し青みのある薄いグレー */
}

/* アイコンの色をDX向けに微調整（メリットセクション） */
.merit-card:nth-child(1) .organic-icon {
  color: #4a90e2;
} /* ブルー：情報・誠実 */
.merit-card:nth-child(2) .organic-icon {
  color: var(--color-main);
} /* グリーン：共有・成長 */
.merit-card:nth-child(3) .organic-icon {
  color: var(--color-accent);
} /* ゴールド：実り・資産 */

/* =========================================
   ページ別ヘッダー画像の指定
   ========================================= */

/* 人材・継承ページの背景画像 */
.inheritance-header-bg {
  /* ↓ 画像のパスを変更してください */
  background-image: url("../images/agri_header.webp");

  /* 画像の位置調整（必要であれば） */
  /* center center: 中央 */
  /* center top: 上寄り（空を多く見せたい時など） */
  background-position: center center;
}

/* --- 導入支援ページ専用ヘッダー --- */
.support-header-bg {
  background-image: url("../images/hero_support.jpg"); /* 広大な水田や風景の写真 */
  background-size: cover;
  background-position: center;
}

/* --- ビジョンメッセージエリア --- */
.vision-message-box {
  position: relative; /* 疑似要素の基準点 */
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 40px; /* 余白を少し広めに */
  background-color: #fff;
  border-radius: 30px;
  border: 1px solid #eee;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
/* 背景に透かしロゴを配置 */
.vision-message-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* ロゴ画像の設定 */
  width: 80%; /* ボックス内でのロゴの大きさ */
  height: 80%;
  background-image: url("../images/toyama-dream-farm-logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* ★重要：極めて薄く（0.03〜0.05程度が文字を邪魔せず上品です） */
  opacity: 0.05;

  z-index: 0; /* 文字の裏側へ */
  pointer-events: none; /* クリックを邪魔しない */
}

/* 文字要素をロゴより前面に出す */
.vision-title,
.vision-content {
  position: relative;
  z-index: 1;
}

.vision-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 40px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.vision-content p {
  font-size: 1.1rem;
  line-height: 2.2;
  color: #444;
  margin-bottom: 30px;
}

/* 下部のアイコン */
.vision-icon {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  color: var(--color-main);
  width: 60px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .vision-title {
    font-size: 1.6rem;
  }
  .vision-message-box {
    padding: 40px 20px;
  }
  .vision-message-box::before {
    width: 90%;
  }
}

/* =========================================
   5. 共通CTAエリア（スタッフイラスト付き・白背景）
   ========================================= */

.sub-cta {
  position: relative;
  background-color: #ffffff; /* フッターのウェーブと繋げるため白 */
  padding: 80px 0 120px; /* 下の余白を多めにとる（フッターの波が被るため） */
  border-top: 1px solid #f0f0f0; /* 前のセクションとの境界線 */
  z-index: 1;
}

/* レイアウト枠 */
.cta-flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1000px;
  margin: 0 auto;
}

/* 左側：スタッフのイラスト */
.cta-staff-wrapper {
  flex: 0 0 280px; /* 幅を固定 */
}

.cta-staff-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  /* ふわふわ浮くアニメーション */
  animation: ctaStaffFloat 4s ease-in-out infinite;
}

/* 右側：テキストとボタン */
.cta-content-area {
  flex: 1;
  text-align: left;
}

.cta-content-area h3 {
  font-size: 2rem;
  color: var(--color-main);
  font-weight: 800;
  margin-bottom: 25px;
  line-height: 1.4;
}

.cta-content-area p {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 35px;
}

.cta-btn-wrap {
  text-align: left;
}

/* イラストの浮遊アニメーション定義 */
@keyframes ctaStaffFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
  .sub-cta {
    padding: 60px 20px 100px; /* スマホでも下の余白は確保 */
  }

  .cta-flex-container {
    flex-direction: column; /* 縦並び */
    text-align: center;
    gap: 40px;
  }

  .cta-staff-wrapper {
    width: 180px; /* 少し小さく */
  }

  .cta-content-area {
    text-align: center;
  }

  .cta-content-area h3 {
    font-size: 1.5rem;
  }

  .cta-btn-wrap {
    text-align: center;
  }
}

.support-header-bg {
  background-image: url("../images/mission_header.webp");

  background-size: cover;
  background-position: center;
}

/* =========================================
   実例ギャラリーカルーセル（ドローン用）
   ========================================= */

/* ギャラリー全体の枠（テキストエリア内に配置するため） */
.feature-gallery {
  margin-top: 40px;
  width: 100%;
}

.gallery-caption {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-main);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.gallery-caption::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-main);
  margin-right: 10px;
}

/* スクロールエリア（本体） */
.gallery-scroller {
  display: flex;
  gap: 20px;
  overflow-x: auto; /* 横スクロール許可 */
  padding-bottom: 20px; /* スクロールバーと影のスペース */

  /* スクロールの挙動を滑らかに（スナップ） */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* スクロールバーを隠す（モダンブラウザ用） */
  scrollbar-width: none; /* Firefox */
}
.gallery-scroller::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* 個別のカード */
.gallery-card {
  flex: 0 0 200px; /* 幅を固定（PC/スマホ共通） */
  scroll-snap-align: start; /* スクロール時にピタッと止まる */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
  transition: transform 0.3s;
}

.gallery-card:hover {
  transform: translateY(-5px);
}

/* 画像枠 */
.g-img-wrap {
  width: 100%;
  height: 130px;
  overflow: hidden;
}
.g-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.gallery-card:hover .g-img-wrap img {
  transform: scale(1.1);
}

/* キャプション */
.gallery-card figcaption {
  padding: 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #333;
  background: #fff;
}

.gallery-card .step {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 0.7rem;
  color: #999;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.feature-item.drone-highlight {
  display: block; /* フレックス解除 */
  max-width: 900px;
  margin: 0 auto 80px;
}
.feature-item.drone-highlight .feature-img {
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 0 auto 40px;
}
.feature-item.drone-highlight .feature-txt {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* =========================================
   ドローン項目専用レイアウト (修正版)
   ========================================= */

/* 親要素：折り返しを許可して、要素を並べる */
.feature-item.drone-highlight {
  display: flex;
  flex-wrap: wrap; /* これで3つ目の要素(ギャラリー)を下段に落とせる */
  justify-content: space-between; /* 左右に配置 */
  align-items: center; /* 垂直位置調整 */
}

/* 1. 画像エリア（PCでは左側 48%） */
.feature-item.drone-highlight .feature-img {
  width: 48%;
  margin-bottom: 0; /* 下余白リセット */
}

/* 2. テキストエリア（PCでは右側 45%） */
.feature-item.drone-highlight .feature-txt {
  width: 45%;
}

/* 3. ギャラリーエリア（強制的に改行して幅100%） */
.feature-item.drone-highlight .feature-gallery {
  width: 100%; /* 横幅いっぱい */
  margin-top: 60px; /* 上の要素との間隔 */
  padding-top: 30px;
  border-top: 1px dashed #ddd; /* 区切り線 */
}

/* --- ギャラリー・スライダーのスタイル（機能させるための重要設定） --- */

.gallery-caption {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-main);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.gallery-caption::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 3px;
  background: var(--color-accent);
  margin-right: 15px;
}

/* ★ここが重要：横スクロールの設定 */
.gallery-scroller {
  display: flex; /* 横並び */
  gap: 20px; /* カード間の隙間 */
  overflow-x: auto; /* 横スクロールを許可 */
  padding-bottom: 20px;

  /* スクロールを滑らかにする設定 */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* 個別のカード設定 */
.gallery-card {
  /* ★重要：幅を固定して縮まないようにする */
  flex: 0 0 240px;
  min-width: 240px;

  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.g-img-wrap {
  height: 150px;
  width: 100%;
}
.g-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- ギャラリーキャプション --- */

.gallery-card figcaption {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: flex-start; /* 左揃え */
  gap: 12px; /* ★重要：バッジと文字の間を12px空ける */

  padding: 20px 18px; /* 余白を広めに */
  background: #fff;

  /* テキスト本体のデザイン */
  color: #333;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6; /* 行間を広げて読みやすく */
  border-top: 1px solid #f9f9f9;
}

/* 「Scene 01」バッジ */
.gallery-card .step {
  /* デザイン */
  background-color: var(--color-accent); /* 稲穂ゴールド */
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  /* 形 */
  padding: 5px 14px;
  border-radius: 50px;

  /* 影 */
  box-shadow: 0 3px 8px rgba(237, 174, 74, 0.3);

  /* マージンは親の gap で制御するため不要ですが、
       Flex非対応ブラウザ等の保険として */
  margin-bottom: 0;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  /* スマホでは縦並びに戻す */
  .feature-item.drone-highlight {
    flex-direction: column;
  }

  .feature-item.drone-highlight .feature-img,
  .feature-item.drone-highlight .feature-txt {
    width: 100%;
    margin-bottom: 30px;
  }

  /* スマホでのカード幅調整 */
  .gallery-card {
    flex: 0 0 200px;
    min-width: 200px;
  }
}

/* --- ギャラリーのボタン付きレイアウト --- */

.gallery-wrapper-relative {
  position: relative; /* ボタンの配置基準 */
  width: 100%;
}

/* スクロールボタン（共通） */
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: var(--color-main);
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;

  /* フレックスで矢印を中央に */
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-btn:hover {
  background-color: var(--color-main);
  color: #fff;
  box-shadow: 0 6px 15px rgba(107, 191, 89, 0.3);
}

/* 位置指定 */
.btn-prev {
  left: -22px;
} /* 左にはみ出させる */
.btn-next {
  right: -22px;
} /* 右にはみ出させる */

/* スマホではボタンを消す（スワイプできるため） */
@media (max-width: 768px) {
  .gallery-btn {
    display: none;
  }
}

/* --- スマホ対応（矢印を表示） --- */
@media (max-width: 768px) {
  /* ボタンを表示させる */
  .gallery-btn {
    display: flex; /* none から flex に変更 */
    width: 36px; /* 少し小さく */
    height: 36px;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明にして画像を見やすく */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  /* 位置を「外側」から「内側」へ変更 */
  /* 画面端ギリギリに配置 */
  .btn-prev {
    left: -10px; /* 少しはみ出させるか、0pxで内側に入れる */
  }

  .btn-next {
    right: -10px;
  }

  /* ラッパー自体に余白を持たせて、ボタンが切れないようにする */
  .gallery-wrapper-relative {
    padding: 0 10px;
  }
}

/* --- DXメッセージボックス（目立つデザイン） --- */
.dx-message-box {
  margin-top: 40px;
  padding: 30px;

  /* 背景：グラデーションで先進性を出す */
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f4fa 100%);

  /* 枠線と影で浮かび上がらせる */
  border: 2px solid #bde0f5;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(74, 144, 226, 0.15);

  /* 横並びレイアウト */
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

/* 左側のアイコン */
.dx-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-blue); /* 青色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.dx-icon svg {
  width: 32px;
  height: 32px;
}

/* 右側のコンテンツ */
.dx-content {
  flex: 1;
}

/* ラベル（英語） */
.dx-label {
  display: inline-block;
  background-color: var(--color-blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.1em;
  box-shadow: 0 3px 6px rgba(74, 144, 226, 0.3);
}

/* 本文 */
.dx-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #333;
  margin: 0 !important;
}

.dx-text strong {
  display: block;
  color: #0056b3; /* 濃い青で強調 */
  font-size: 1.2rem; /* サイズアップ */
  margin-bottom: 10px;
  background: linear-gradient(transparent 60%, rgba(189, 224, 245, 0.6) 60%); /* マーカー風 */
  width: fit-content;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .dx-message-box {
    flex-direction: column; /* 縦並び */
    text-align: center;
    align-items: center;
    padding: 25px 20px;
  }

  .dx-text strong {
    margin: 0 auto 10px; /* 中央揃え */
  }
}

/* =========================================
   企業概要ページ (Company) - 
   ========================================= */

/* --- 1. ヘッダー修正 --- */
.page-header {
  position: relative;
  height: 400px; /* 高さを確保 */
  margin-top: 0; /* 余計な隙間を消す */
  background-color: #333; /* 画像読み込み前の保険 */
}

/* 画像表示エリア */
.company-header-bg {
  background-image: url("../images/company_header.jpg");
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 青空マスクの適用（共通設定がない場合のみ追記） */
.company-header-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(30, 144, 255, 0.7) 0%, rgba(135, 206, 235, 0.3) 100%);
  z-index: 1;
}

/* --- 2. メッセージセクション（縦×横ミックス） --- */
.company-message {
  background-color: #fff;
  padding-bottom: 100px;
}

.message-mixed-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px; /* タイトルと本文の間隔 */
}

/* 左：縦書きタイトル */
.message-title-vertical {
  writing-mode: vertical-rl; /* 縦書き */
  text-orientation: upright;
  height: 500px; /* 高さを指定してレイアウトを安定させる */
}

.vertical-heading {
  font-family: "Shippori Mincho", serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-main);
  letter-spacing: 0.15em;
  line-height: 1.8;
  margin-left: 20px;
}

.vertical-en {
  writing-mode: vertical-rl; /* 英語も縦向きに */
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: rotate(180deg); /* 英語の向きを読みやすく調整 */
}

/* 右：コンテンツエリア */
.message-content-right {
  width: 55%;
  padding-top: 20px; /* タイトルより少し下げる */
}

/* 写真（アーチ型） */
.message-img-arch {
  width: 100%;
  height: 350px;
  /* 上部だけ丸くして「窓」のような雰囲気に */
  border-radius: 180px 180px 20px 20px;
  overflow: hidden;
  margin-bottom: 50px;
  box-shadow: 20px 20px 0px rgba(240, 240, 240, 1); /* 淡い影 */
}

.message-img-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}
/* ホバーでゆっくりズーム */
.message-content-right:hover .message-img-arch img {
  transform: scale(1.05);
}

/* 横書き本文 */
.message-body-horizontal {
  font-family: "Zen Maru Gothic", sans-serif;
  color: #444;
  line-height: 2.2;
  font-size: 1.05rem;
  text-align: justify;
}

.lead-text {
  font-weight: 700;
  color: #333;
  font-size: 1.15rem;
  margin-bottom: 30px;
}

.message-body-horizontal p {
  margin-bottom: 25px;
}

.message-sign-horizontal {
  font-family: "Great Vibes", cursive;
  font-size: 2.5rem;
  color: var(--color-accent);
  text-align: right;
  margin-top: 40px;
  transform: rotate(-5deg); /* 筆記体を少し傾けて手書き感を出す */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .message-mixed-layout {
    flex-direction: column;
    gap: 40px;
  }

  /* スマホではタイトルを横書きに戻すか、高さを自動にする */
  .message-title-vertical {
    writing-mode: horizontal-tb;
    height: auto;
    text-align: center;
    width: 100%;
  }

  .vertical-heading {
    font-size: 1.8rem;
    margin-left: 0;
    margin-bottom: 10px;
    br {
      display: none;
    } /* 改行を消す */
  }
  .vertical-en {
    writing-mode: horizontal-tb;
    transform: none;
    display: block;
    margin-bottom: 20px;
  }

  .message-content-right {
    width: 100%;
  }

  .message-img-arch {
    height: 250px;
    border-radius: 20px; /* スマホでは普通の角丸に */
  }

  .message-body-horizontal {
    padding: 0 10px;
  }
}

/* =========================================
   会社情報セクションのウェーブ位置
   ========================================= */

/* 親セクション：ここを基準にする */
.company-info {
  position: relative; /* ★重要：絶対配置の基準点にする */
  z-index: 1;
  /* 上部のウェーブが被る分の余白 */
  padding-top: 150px;
  padding-bottom: 100px;
  background-color: #f7f9f7; /* bg-grayの色 */
}

/* 会社情報専用のウェーブ調整（もし共通クラスでうまくいかない場合） */
.company-info .section-wave-top {
  position: absolute;
  top: -1px; /* セクションの最上部に配置 */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
}

.company-info .section-wave-top svg {
  width: 100%;
  height: 100px;
  display: block;
}

/* コンテナ（コンテンツ）をウェーブより上に */
.company-info .container {
  position: relative;
  z-index: 2;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .company-info {
    padding-top: 100px;
  }
  .company-info .section-wave-top svg {
    height: 60px;
  }
}

/* --- コンセプトメッセージエリア --- */
.message-mixed-layout {
  display: flex;
  justify-content: center;
  /* align-items: flex-start; から stretch に変更（左右の高さを揃える） */
  align-items: stretch;
  gap: 80px;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- 左：タイトルエリア --- */
.message-title-area {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  min-height: 650px;
}

/* 英語の添え字も意味に合わせて変更 */
.en-accent {
  font-family: "Oswald", sans-serif;
  font-size: 0.9rem;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.en-accent::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--color-accent);
  margin-left: 15px;
}

/* 縦書き見出し */
.vertical-heading {
  writing-mode: vertical-rl;
  font-family: "Shippori Mincho", serif;
  font-size: 2.5rem; /* 文字数が多いのでわずかにサイズ調整 */
  font-weight: 800;
  color: var(--color-main);
  letter-spacing: 0.15em;
  line-height: 1.7;
  margin: 0;
  z-index: 2;
}
/* 装飾ライン */
.title-deco-line {
  width: 1px;
  /* 親の高さいっぱいに伸びる設定 */
  flex-grow: 1;
  /* 上から下へ消えていくグラデーション */
  background: linear-gradient(to bottom, var(--color-main) 0%, transparent 100%);
  margin-top: 30px;
  /* タイトルの文字のラインに合わせる（数値は適宜調整してください） */
  margin-right: 32px;
  opacity: 0.6;
}
/* ★縦書きの巨大な "MESSAGE" テキスト（ふちを太く修正） */
.vertical-message-text {
  writing-mode: vertical-rl;
  font-family: "Oswald", sans-serif;
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: 0.15em; /* 文字間を少し広げて優雅に */

  /* デザインの肝：中抜き（アウトライン） */
  color: transparent;
  /* ★修正：1px から 2px に太くしました */
  -webkit-text-stroke: 2px var(--color-main);

  /* ★修正：少しだけ濃くして、視認性を上げました */
  opacity: 0.2;

  margin-top: 20px;
  margin-right: 20px;
  user-select: none;
  pointer-events: none;
  line-height: 1;

  /* 登場アニメーション（お好みで） */
  animation: messageSlideIn 1.5s ease-out forwards;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 0.2;
    transform: translateY(0);
  }
}
/* --- 右：コンテンツエリア（位置微調整） --- */
.message-content-right {
  width: 60%;
  /* タイトルの高さに合わせて調整 */
  padding-top: 40px;
}
/* --- 右：メッセージ本文（エモーショナル） --- */
.message-body-emotional {
  margin-top: 60px;
  font-family: "Zen Maru Gothic", sans-serif;
  color: #444;
}

/* 各ブロックに余白を持たせる */
.msg-block {
  margin-bottom: 50px;
  /* 左に細い線を入れて「詩」のように見せる */
  border-left: 1px solid #ddd;
  padding-left: 30px;
  opacity: 0; /* アニメーション用（スクロールで表示させるなら） */
  transform: translateY(20px);
  animation: fadeUpMsg 1s ease-out forwards;
}

/* アニメーション遅延 */
.msg-block:nth-child(1) {
  animation-delay: 0.2s;
}
.msg-block:nth-child(2) {
  animation-delay: 0.4s;
}
.msg-block:nth-child(3) {
  animation-delay: 0.6s;
}
.msg-block:nth-child(4) {
  animation-delay: 0.8s;
  border-left: none;
} /* 最後は線なし */

.msg-block p {
  font-size: 1.05rem;
  line-height: 2.2;
  margin: 0;
}

.msg-block .lead {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
}

.msg-block .highlight {
  background: linear-gradient(transparent 60%, rgba(237, 174, 74, 0.3) 60%);
  font-weight: 700;
}

/* 署名（サイン） */
.msg-block .sign {
  font-family: "Great Vibes", cursive;
  font-size: 3rem; /* 筆記体は線が細いので大きめに */
  color: var(--color-accent); /* ゴールド */
  margin-top: 50px;
  text-align: right;
  transform: rotate(-5deg);
  transform-origin: bottom right; /* 右下を基準に回転 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}
@keyframes fadeUpMsg {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .msg-block .sign {
    font-size: 2.2rem;
    transform: rotate(-3deg);
    text-align: center; /* スマホでは中央寄せも綺麗です */
  }
  .message-mixed-layout {
    flex-direction: column;
    gap: 40px;
  }

  .message-title-area {
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 20px;
  }

  .vertical-heading {
    writing-mode: horizontal-tb;
    position: static;
    font-size: 1.8rem;
    line-height: 1.4;
    br {
      display: none;
    }
  }

  .en-accent {
    transform: none;
    position: static;
    display: block;
    margin-bottom: 10px;
    color: var(--color-accent);
    text-align: center;
  }

  .msg-block {
    padding-left: 15px;
    border-left-width: 2px;
    margin-bottom: 30px;
  }
}

/* =========================================
   スマホ用：企業メッセージの崩れを修正
   ========================================= */
@media (max-width: 768px) {
  /* レイアウトを縦並びに */
  .message-mixed-layout {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 10px;
  }

  /* 左側にあったタイトルエリアを全幅に */
  .message-title-area {
    width: 100%;
    height: auto; /* 高さを自動に */
    align-items: center; /* 中央寄せ */
    min-height: auto;
  }

  /* 英語アクセント（横書き・中央） */
  .en-accent {
    margin-bottom: 20px;
    justify-content: center;
  }
  .en-accent::after {
    display: none; /* スマホでは線を消してスッキリさせる */
  }

  /* 縦書き見出し（スマホでも「粋」に見えるよう高さを指定して中央配置） */
  .vertical-heading {
    writing-mode: vertical-rl;
    height: 350px; /* 縦書きの長さを確保 */
    font-size: 1.8rem; /* 少し小さく */
    margin: 0 auto;
    padding: 0;
    line-height: 1.6;
  }

  /* 巨大な "MESSAGE" 文字（スマホでは横書きで背景にする） */
  .vertical-message-text {
    writing-mode: horizontal-tb; /* 横書きに変更 */
    font-size: 3rem; /* サイズを落とす */
    margin-top: -30px; /* タイトルに少し重ねる */
    margin-right: 0;
    text-align: center;
    opacity: 0.1; /* さらに薄く */
    -webkit-text-stroke: 1px var(--color-main);
  }

  /* --- 右側にあった本文エリアを全幅・横書きに修正 --- */
  .message-content-right {
    width: 100%;
    padding-top: 0;
  }

  /* 画像のアーチをスマホ用に調整 */
  .message-img-arch {
    height: 220px;
    border-radius: 100px 100px 20px 20px; /* 丸みを少し抑える */
    margin-bottom: 40px;
    box-shadow: 10px 10px 0px rgba(240, 240, 240, 1); /* 影を小さく */
  }

  /* ★重要：本文を横書き（通常の読み方）に強制リセット */
  .message-body-emotional {
    writing-mode: horizontal-tb;
    margin-top: 20px;
    text-align: left; /* 左寄せで読みやすく */
  }

  /* 本文ブロックの余白 */
  .msg-block {
    margin-bottom: 35px;
    padding-left: 15px;
    border-left: 2px solid #eef7ee; /* 縦線を細くして圧迫感を減らす */
    transform: none !important; /* アニメーションによるズレを防止 */
    opacity: 1 !important;
  }

  .msg-block p {
    font-size: 1rem;
    line-height: 1.8;
  }

  .msg-block .lead {
    font-size: 1.1rem;
    margin-bottom: 15px;
  }

  /* 署名（横書きで中央〜右寄せ） */
  .msg-block .sign {
    font-size: 2.2rem;
    margin-top: 30px;
    text-align: right;
    transform: rotate(-3deg);
    white-space: nowrap; /* 1行に収める */
  }
}
/* =========================================
   3. 会社概要（会社情報テーブル）
   ========================================= */

/* セクション全体の背景色調整 */
.company-info.bg-gray {
  background-color: #f7f9f7; /* 薄いグレー/グリーン */
}

/* 会社情報のタイトル（会社情報、アクセス等共通） */
.block-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 60px;
  letter-spacing: 0.1em;
}
@media (max-width: 768px) {
  .block-title {
    font-size: 1.8rem;
  }
}
/* テーブルを包む枠 */
.info-table-wrap {
  max-width: 900px; /* 読みやすい幅に制限 */
  margin: 0 auto;
  /* 上端にメインカラーの少し太い線を引いてアクセントに */
  border-top: 2px solid var(--color-main);
  background-color: transparent; /* 背景はセクションに馴染ませる */
}

/* 各行（dlタグ）の設定 */
.info-row {
  display: flex;
  align-items: flex-start; /* 上揃え */
  border-bottom: 1px solid #ddd; /* 下線のみで構成 */
  padding: 30px 20px; /* 以前より余白を広げて「読み物」感を出す */
  margin: 0;
  transition: background-color 0.3s ease;
}

/* ホバー時にうっすら色を変える（任意） */
.info-row:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

/* 項目名（dtタグ） */
.info-row dt {
  width: 25%; /* 項目名の幅 */
  font-weight: 800;
  color: var(--color-main);
  font-size: 1.05rem;
  flex-shrink: 0; /* 幅を維持 */
}

/* 内容（ddタグ） */
.info-row dd {
  width: 75%; /* 内容の幅 */
  margin: 0;
  color: #444;
  line-height: 1.8;
  font-size: 1.05rem;
}

/* 改行が含まれる場合（住所や事業内容）の調整 */
.info-row dd br {
  margin-bottom: 5px;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .info-table-wrap {
    border-top-width: 1px;
  }

  .info-row {
    flex-direction: column; /* 縦並びにする */
    padding: 20px 10px;
  }

  .info-row dt {
    width: 100%;
    margin-bottom: 8px;
    font-size: 0.95rem;
    /* スマホでは左に小さな色線を付けて項目を分かりやすく */
    border-left: 3px solid var(--color-main);
    padding-left: 10px;
  }

  .info-row dd {
    width: 100%;
    font-size: 0.95rem;
    padding-left: 13px; /* dtの線と位置を合わせる */
  }
}

/* =========================================
   共通：セクション下部のウェーブ装飾
   ========================================= */

.company-info,
.features-list {
  position: relative;
  /* 下部のウェーブが重なる分の余白を確保 */
  padding-bottom: 150px !important;
}

.section-wave-bottom {
  position: absolute;
  bottom: -1px; /* 隙間防止 */
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}

.section-wave-bottom svg {
  width: 100%;
  height: 100px; /* 波の高さ */
  display: block;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .company-info,
  .features-list {
    padding-bottom: 100px !important;
  }
  .section-wave-bottom svg {
    height: 60px; /* スマホでは少し低く */
  }
}

/* =========================================
   4. アクセスセクション（白背景）
   ========================================= */

.company-access {
  background-color: #ffffff; /* 確実に白に設定 */
  position: relative;
  z-index: 2;
  margin-top: 0; /* 前のセクションとの隙間を消す */
  padding-top: 60px; /* ウェーブとの距離を調整 */
}

/* マップの枠を少し柔らかくデザイン */
.access-map {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 30px; /* 角を大きく丸める */
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06); /* 柔らかい影 */
  line-height: 0;
}

.access-map iframe {
  width: 100%;
  height: 450px;
  border: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .company-access {
    padding-top: 40px;
  }
  .access-map {
    border-radius: 15px;
  }
  .access-map iframe {
    height: 300px;
  }
}

/* =========================================
   スマホ用：特定のタイトルの改行を有効化
   ========================================= */
@media (max-width: 768px) {
  /* .company-message 内の .vertical-heading にある br のみ表示させる */
  .company-message .vertical-heading br {
    display: block !important; /* 強制的に改行として機能させる */
  }

  /* ついでに、改行した時の文字バランスを整える（必要であれば） */
  .company-message .vertical-heading {
    line-height: 1.4; /* 行間を少し詰めて塊感を出す */
    text-align: center; /* 横書き（horizontal-tb）にしている場合は中央寄せ */
  }
}

/* =========================================
   最先端ドローン・テックヘッダー
   ========================================= */

/* --- テックヘッダー：スキャン＆フラッシュ演出 --- */

.tech-header {
  background-color: #001a2d;
  height: 500px;
  position: relative;
  overflow: hidden;
}

/* 1. スキャナーのラップ（ウェーブより下に下げる） */
.tech-scanner-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* 1. 斜めに走るスキャンライン */
.diagonal-scan {
  position: absolute;
  top: 0;
  /* ★修正：始点をさらに遠くへ。skewで傾く分を考慮して -150% から開始 */
  left: -150%;

  /* 幅は画面の半分程度にして「一筋の光」を強調 */
  width: 100%;
  height: 100%;

  /* グラデーションは垂直に作り、skewで傾ける方が制御しやすいです */
  background: linear-gradient(to right, transparent 0%, rgba(135, 206, 235, 0) 40%, rgba(135, 206, 235, 0.6) 48%, rgba(255, 255, 255, 0.9) 50%, /* 中心 */ rgba(135, 206, 235, 0.6) 52%, rgba(135, 206, 235, 0) 60%, transparent 100%);

  /* ★修正：グラデーションの角度ではなく、要素自体を斜めに歪ませる */
  transform: skewX(-25deg);

  /* 1回のみ実行 */
  animation: scanDiagonalOnce 2.2s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
  animation-delay: 0.8s; /* ローディング後、少し落ち着いてから開始 */
}

/* 2. 走った後の全体的な輝き（フラッシュ） */
.shining-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  z-index: 4;
  animation: flashEffectOnce 2.2s ease-out 1 forwards;
  animation-delay: 0.8s;
}

/* --- アニメーション Keyframes --- */

/* --- Keyframes（始点と終点を大幅に広げる） --- */

@keyframes scanDiagonalOnce {
  0% {
    /* 傾いているので、-150% くらい外側からでないと先端が見えてしまいます */
    left: -150%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    /* 終点も 150% まで振り切る */
    left: 150%;
    opacity: 0;
  }
}

/* スキャンが中盤を過ぎたあたりで一瞬輝く */
@keyframes flashEffectOnce {
  /* 2.2sのアニメーションの 60% (約1.3s後) にピークを持ってくる */
  0%,
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0.25;
    filter: blur(10px);
  }
  100% {
    opacity: 0;
  }
}

/* 背景画像のズームも一回で止める（またはゆっくり継続） */
.drone-header-bg {
  animation: slowZoomOnce 3s ease-out 1 forwards;
}
@keyframes slowZoomOnce {
  0% {
    transform: scale(1.1);
  } /* 少し大きめから開始 */
  100% {
    transform: scale(1);
  } /* 定位置に収まる */
}

/* タイトルも輝きに合わせて少し発光させる */
.tech-title-wrap {
  position: relative;
  z-index: 10;
  text-align: center;
  animation: titleGlow 6s infinite;
}
@keyframes titleGlow {
  0%,
  25% {
    filter: brightness(1);
  }
  27% {
    filter: brightness(1.5) drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  }
  40% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1);
  }
}

/* テックバッジ（上部の小さなラベル） */
.tech-badge {
  display: inline-block;
  border: 1px solid rgba(135, 206, 235, 0.6);
  padding: 4px 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.tech-badge span {
  font-family: "Oswald", sans-serif;
  font-size: 0.8rem;
  color: #87ceeb;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: block;
  animation: flashText 2s infinite alternate;
}

@keyframes flashText {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* 巨大な透かし文字 */
.en-outline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Oswald", sans-serif;
  font-size: 10rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  z-index: -1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* タイトル本体の強化 */
.tech-header .page-title .en {
  color: #ffffff;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  text-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
}

.tech-header .page-title .ja {
  font-size: 3rem;
  letter-spacing: 0.1em;
}

/* 背景画像のトーン調整 */
.drone-header-bg {
  filter: brightness(0.8) contrast(1.1); /* 少しコントラストを強める */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .tech-header {
    height: 350px;
  }
  .en-outline {
    font-size: 5rem;
  }
  .tech-header .page-title .ja {
    font-size: 2rem;
  }
  .tech-grid-overlay {
    background-size: 20px 20px;
  }
}

/* --- ドローンページ専用ヘッダー画像 --- */
.drone-header-bg {
  /* ここに使用する画像のパスを指定してください */
  /* 例: assets/images/drone_pro_header.webp */
  background-image: url("../images/drone_header.webp");

  background-size: cover;
  background-position: center;

  /* 最先端の雰囲気を出すために、少しコントラストと明度を調整 */
  filter: brightness(0.7) contrast(1.2);
}

/* =========================================
   Drone Expert Page: 共通設定
   ========================================= */
.drone-expert-page {
  background-color: #ffffff;
  color: #1a1a1a;
  overflow-x: hidden;
}

/* =========================================
   2. ダイナミック・イントロダクション
   ========================================= */

/* コンテナ幅をワイドに拡張 */
.drone-vision-section .container {
  max-width: 1500px !important;
  width: 95%;
  margin: 0 auto;
}

.drone-intro-section {
  padding: 80px 0;
}

.vision-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* --- 左側：テキストデザイン --- */
.vision-text-box {
  flex: 1;
  position: relative;
  z-index: 10;
}

.vision-bg-text {
  position: absolute;
  top: -80px;
  left: -40px;
  font-family: "Oswald", sans-serif;
  font-size: 15rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(74, 144, 226, 0.1);
  z-index: -1;
  pointer-events: none;
}

.vision-tag-wrap {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.vision-tag-line {
  width: 40px;
  height: 2px;
  background-color: var(--color-blue);
}

.vision-tag {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  color: var(--color-blue);
  letter-spacing: 0.3em;
  font-size: 0.9rem;
  font-weight: 600;
}

.vision-heading {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.vision-description .lead {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #333;
}

.vision-description p {
  font-size: 1.1rem;
  line-height: 2.2;
  color: #555;
}

/* --- 右側：ビジュアルエリア --- */
.vision-visual {
  flex: 1.2;
  position: relative;
  min-width: 500px;
}

.vision-img-frame {
  position: relative;
  width: 100%;
  height: 600px;
  background-color: #001a2d; /* 画像の背景色 */
  overflow: hidden;
  transform: skewX(-8deg);
  box-shadow: 40px 40px 80px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* 画像本体：歪みを打ち消して完全にフィットさせる */
.vision-img-frame .tech-main-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 105% !important;
  height: 105% !important;
  object-fit: cover !important;
  /* translate(-50%, -50%) で中央固定し、scaleで隙間を完全に消す */
  transform: translate(-50%, -50%) skewX(8deg) scale(1.2) !important;
  filter: brightness(0.9) contrast(1.1);
  transition: transform 0.8s ease;
  display: block;
}

/* --- HUDエフェクト --- */
.hud-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  transform: skewX(8deg); /* HUDは傾けない */
  pointer-events: none;
  background-image: linear-gradient(rgba(74, 144, 226, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 144, 226, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* --- 4隅のブラケット --- */

.target-bracket {
  position: absolute;
  width: 50px;
  height: 50px;
  background: transparent; /* 透明 */
  border: none !important;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
  z-index: 5;
  pointer-events: none;
}

/* 各コーナー */

.top-left {
  top: 30px;
  left: 30px;
  border-top: 4px solid #ffffff !important; /* ★白に変更 */
  border-left: 4px solid #ffffff !important;
  animation: focus-tl 4s ease-in-out infinite;
}

.top-right {
  top: 30px;
  right: 30px;
  border-top: 4px solid #ffffff !important; /* ★白に変更 */
  border-right: 4px solid #ffffff !important;
  animation: focus-tr 4s ease-in-out infinite;
}

.bottom-left {
  bottom: 30px;
  left: 30px;
  border-bottom: 4px solid #ffffff !important; /* ★白に変更 */
  border-left: 4px solid #ffffff !important;
  animation: focus-bl 4s ease-in-out infinite;
}

.bottom-right {
  bottom: 30px;
  right: 30px;
  border-bottom: 4px solid #ffffff !important; /* ★白に変更 */
  border-right: 4px solid #ffffff !important;
  animation: focus-br 4s ease-in-out infinite;
}

/* アニメーション（動き）は前回の「中心へ絞り込む」設定を維持します */
@keyframes focus-tl {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  20%,
  80% {
    transform: translate(15px, 15px);
    opacity: 1;
  }
}
@keyframes focus-tr {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  20%,
  80% {
    transform: translate(-15px, 15px);
    opacity: 1;
  }
}
@keyframes focus-bl {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  20%,
  80% {
    transform: translate(15px, -15px);
    opacity: 1;
  }
}
@keyframes focus-br {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  20%,
  80% {
    transform: translate(-15px, -15px);
    opacity: 1;
  }
}

/* =========================================
   スマホ用：画像表示の最適化（全幅・高倍率版）
   ========================================= */
@media (max-width: 768px) {
  /* 1. 画像の外枠 */
  .vision-img-frame {
    height: 350px;
    transform: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #001a2d;
  }

  /* 2. 画像本体 */
  .vision-img-frame .tech-main-img {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: translate(-50%, -50%) scale(1.15) !important;
    filter: brightness(1);
  }

  /* 3. 装飾（HUDなどは非表示を維持） */
  .hud-overlay,
  .frame-deco,
  .target-bracket {
    display: none !important;
  }
  .vision-description .lead {
    font-size: 1.15rem;
  }
  .vision-description p {
    font-size: 0.95rem;
  }
}

/* データラベル */
.data-label {
  position: absolute;
  bottom: 278px;
  left: 45%;
  transform: translateX(-50%) !important;
  background: rgba(0, 26, 45, 0.8);
  color: var(--color-blue);
  padding: 8px 15px;
  font-family: "Oswald", sans-serif;
  font-size: 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--color-blue);
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(4px);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-blue);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-blue);
  animation: dotBlink 1s infinite;
}

@keyframes dotBlink {
  50% {
    opacity: 0.3;
  }
}

/* 装飾枠 */
.frame-deco {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  transform: skewX(-8deg);
  z-index: 1;
}

/* =========================================
   3. ドローン事業の3つの柱（修正・統合版）
   ========================================= */

.drone-core-services {
  padding-top: 50px;
  background-color: #fff;
  position: relative;
  background-image: radial-gradient(#e0e8f0 1.2px, transparent 1.2px), linear-gradient(rgba(224, 232, 240, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 232, 240, 0.3) 1px, transparent 1px);
  background-size:
    40px 40px,
    120px 120px,
    120px 120px;
  overflow: hidden; /* 背景文字のはみ出し防止 */
}

.service-block {
  padding: 160px 0;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.service-block:nth-child(even) {
  background-color: rgba(248, 251, 253, 0.8);
}

.block-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 100px;
  position: relative;
  z-index: 2;
}

.service-block.reverse .block-inner {
  flex-direction: row-reverse;
}

/* --- 背景：巨大な英字（配置を調整） --- */
.block-info {
  flex: 1; /* 幅を確保 */
  position: relative;
}

/* --- 背景：巨大な英字（サイズと位置の調整） --- */
.block-info::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -210px;
  font-family: "Oswald", sans-serif;
  font-size: 10rem; /* 18rem -> 10rem */
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(74, 144, 226, 0.15);
  z-index: -1;
  pointer-events: none;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

/* 右寄せレイアウト（reverse）の時の位置 */
.service-block.reverse .block-info::before {
  left: auto;
  right: -200px;
}

.block-photography .block-info::before {
  content: "IMAGING";
}
.block-survey .block-info::before {
  content: "SURVEY";
}
.block-inspection .block-info::before {
  content: "INSPECT";
}

/* --- コンテンツ（文字） --- */
.block-num {
  font-family: "Oswald", sans-serif;
  font-size: 11rem;
  font-weight: 700;
  color: rgba(74, 144, 226, 0.08);
  line-height: 0.8;
  display: block;
  margin-bottom: -40px;
  margin-left: -10px;
}

/* タイトル（BIZ UDPGothic） */
.drone-expert-page .block-title {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 4.5rem;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 10px;
}

.block-title .sub {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  color: var(--color-blue);
  letter-spacing: 0.3em;
  margin-top: 15px;
  font-weight: 500;
}

.block-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: -40px;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--color-blue);
  border-right: 2px solid var(--color-blue);
}

.block-detail {
  margin-top: 60px;
  padding-left: 35px;
  border-left: 5px solid var(--color-blue);
  background: linear-gradient(to right, rgba(74, 144, 226, 0.03), transparent);
  padding-top: 15px;
  padding-bottom: 15px;
}

.block-detail h4 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #000;
}

.tag-list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin-top: 30px;
}

.tag-list li {
  background: #f0f7ff;
  color: var(--color-blue);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
/* --- 画像レイアウト：01 撮る（2枚重ね） --- */
.block-visual-dual {
  flex: 1.2;
  position: relative;
  /* 高さと幅を明示して確保 */
  height: 520px;
  min-width: 500px;
}

.block-visual-dual .img-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
  height: 340px;
  z-index: 2;
  border: 10px solid #fff;
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
}

.block-visual-dual .img-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 75%;
  height: 340px;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
}

.block-visual-dual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 画像レイアウト：02 測る（1枚・装飾） --- */
.block-visual-single {
  flex: 1.2;
  position: relative;
  min-width: 500px;
}

.block-visual-single .img-main {
  width: 100%;
  height: 520px; /* 高さ確保 */
  border-radius: 0 100px 0 100px;
  overflow: hidden;
  box-shadow: 30px 30px 0 var(--color-blue);
}

.block-visual-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-visual-single::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-top: 1px solid var(--color-blue);
  border-right: 1px solid var(--color-blue);
  opacity: 0.3;
}

/* --- 画像レイアウト：03 点検（HUD） --- */
.block-visual-hud {
  flex: 1.2;
  position: relative;
  min-width: 500px;
}

.block-visual-hud .img-wrap {
  position: relative;
  width: 100%;
  height: 520px; /* 高さ確保 */
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.block-visual-hud img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- HUD装飾（共通） --- */
.service-block::before {
  content: "+";
  position: absolute;
  top: 10%;
  right: 5%;
  font-family: monospace;
  font-size: 2rem;
  color: var(--color-blue);
  opacity: 0.2;
}

/* =========================================
   スマホ表示の修正 (max-width: 1024px)
   ========================================= */
@media (max-width: 1024px) {
  .service-block {
    padding: 80px 0;
  }

  /* 縦並びの強制 */
  .block-inner {
    flex-direction: column !important;
    gap: 40px;
    align-items: center;
  }

  /* テキストエリアの幅 */
  .block-info {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  /* 画像エリアの幅 */
  .block-visual-dual,
  .block-visual-single,
  .block-visual-hud {
    width: 100%;
    min-width: 100%;
    /* スマホ用の高さ設定 */
    height: 380px;
  }

  /* ナンバー・タイトル調整 */
  .block-num {
    font-size: 6rem;
    margin-bottom: -15px;
    margin-left: 0;
  }

  .drone-expert-page .block-title {
    font-size: 2.5rem;
  }

  .block-detail {
    border-left: none;
    padding-left: 0;
    text-align: left;
    margin-top: 30px;
  }

  .tag-list {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* 画像サイズのスマホ調整 */
  .block-visual-dual .img-top,
  .block-visual-dual .img-bottom {
    width: 80%;
    height: 240px;
  }

  .block-visual-single .img-main {
    height: 300px;
    border-radius: 0 50px 0 50px;
  }

  .block-visual-hud .img-wrap {
    height: 300px;
  }

  /* 巨大文字の非表示 */
  .block-info::before {
    display: none;
  }
  /* 2枚重ね（dual）のコンテナ */
  .block-visual-dual {
    /* 固定の高さを解除し、中身に合わせて伸びるようにする */
    height: auto !important;

    /* テキストとの間隔をしっかり空ける */
    margin-top: 40px;

    /* 縦並びのフレックスボックスに変更 */
    display: flex;
    flex-direction: column;
    gap: 20px; /* 画像同士の間隔 */
  }

  /* 画像個別の設定（絶対配置をやめてスタックさせる） */
  .block-visual-dual .img-top,
  .block-visual-dual .img-bottom {
    position: relative !important; /* absoluteを解除 */
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;

    /* 幅を100%にして大きく見せる */
    width: 100% !important;
    height: 250px !important;

    /* 影や枠線の調整 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    border: none !important; /* 重ねないので白枠も不要 */
  }
  /* =========================================
   スマホ用：ドローンイントロ（レイアウト崩れ修正版）
   ========================================= */
  @media (max-width: 1024px) {
    /* 1. レイアウトを縦並びに変更 */
    .vision-layout {
      display: flex;
      flex-direction: column !important; /* 強制的に縦並び */
      gap: 40px;
      padding: 60px 20px;
      width: 100% !important;
      box-sizing: border-box;
    }

    /* 2. テキストエリアの幅を確保 */
    .vision-text-box {
      width: 100%;
      max-width: none;
      text-align: center; /* スマホでは中央揃えが見やすい */
      padding: 0;
    }

    /* 巨大な背景文字（SPEC）の位置調整 */
    .vision-bg-text {
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8rem; /* 少し小さく */
    }

    /* タイトル文字サイズの調整 */
    .vision-heading {
      font-size: 2.8rem;
      line-height: 1.3;
      word-break: keep-all; /* 単語の途中で切れないように */
    }

    /* 3. 画像エリアの幅制限を解除 */
    .vision-visual {
      width: 100% !important;
      min-width: 0 !important; /* PC用の500px制限を解除 */
      flex: auto;
    }

    /* 画像枠の高さと傾斜リセット */
    .vision-img-frame {
      width: 100%;
      height: 350px !important; /* スマホに適した高さ */
      transform: none !important; /* 斜め（skew）を解除 */
      border-radius: 20px !important;
      margin-left: 0;
    }

    /* 画像本体の表示調整 */
    .vision-img-frame .tech-main-img {
      width: 100% !important;
      height: 100% !important;
      /* シンプルに中央配置 */
      transform: translate(-50%, -50%) scale(1.2) !important;
      top: 50% !important;
      left: 50% !important;
    }

    .hud-overlay,
    .frame-deco {
      display: none !important;
    }

    .vision-layout {
      display: flex;
      flex-direction: column !important; /* 強制的に縦並び */
      gap: 40px;
      padding: 60px 20px;
      width: 100% !important;
      box-sizing: border-box;
    }

    .vision-text-box {
      width: 100%;
      max-width: none;
      text-align: center; /* スマホでは中央揃えが見やすい */
      padding: 0;
    }

    .vision-bg-text {
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8rem; /* 少し小さく */
    }

    .vision-heading {
      font-size: 2.25rem;
      line-height: 1.3;
      word-break: keep-all; /* 単語の途中で切れないように */
    }

    .vision-visual {
      width: 100% !important;
      min-width: 0 !important; /* PC用の500px制限を解除 */
      flex: auto;
    }
    .vision-img-frame {
      width: 100%;
      height: 350px !important; /* スマホに適した高さ */
      transform: none !important; /* 斜め（skew）を解除 */
      border-radius: 20px !important;
      margin-left: 0;
    }

    .vision-img-frame .tech-main-img {
      width: 100% !important;
      height: 100% !important;
      /* シンプルに中央配置 */
      transform: translate(-50%, -50%) scale(1.2) !important;
      top: 50% !important;
      left: 50% !important;
    }

    .hud-overlay,
    .frame-deco {
      display: none !important;
    }
  }
}
/* =========================================
   スマホ表示の修正 (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
  .service-block {
    padding: 80px 0;
  }

  /* 縦並びの順序と余白を確実に調整 */
  .block-inner {
    flex-direction: column !important;
    gap: 40px;
  }

  .block-num {
    font-size: 6rem;
    margin-bottom: -15px;
    text-align: center;
  }

  /* ★修正：詳細文(block-detail)が画像に隠れないように余白を確保 */
  .block-info {
    width: 100%;
    margin-bottom: 20px; /* 画像との間に余白を作る */
  }

  .block-detail {
    border-left: none;
    padding-left: 0;
    text-align: left;
  }

  /* 画像エリア：隠れないよう高さを調整 */
  .block-visual-dual {
    width: 100%;
    height: 380px; /* スマホ用に高さを詰める */
    margin-top: 0;
  }

  .block-visual-dual .img-top,
  .block-visual-dual .img-bottom {
    width: 80% !important;
    height: 240px !important;
  }

  .block-visual-single .img-main {
    height: 300px;
    border-radius: 0 50px 0 50px !important;
    box-shadow: 15px 15px 0 var(--color-blue);
  }

  .tag-list {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* =========================================
   ドローン事業ページ専用：タイトルの上書き
   ========================================= */

.drone-expert-page .block-title {
  /* CDNで読み込んだ BIZ UDPGothic を指定 */
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left; /* 会社概要はセンターでしたが、ここは左寄せが基本 */
}

/* スマホ表示の個別上書き */
@media (max-width: 768px) {
  .drone-expert-page .block-title {
    font-size: 2.2rem;
    text-align: center; /* スマホでは中央寄せ */
    margin-bottom: 20px;
  }
}

/* =========================================
   スマホ用：配置のセンタリング修正
   ========================================= */
@media (max-width: 1024px) {
  /* --- 1. イントロのテキストを中央揃え --- */

  .vision-text-box {
    text-align: center; /* 全体の文字を中央へ */
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素（タグなど）も中央へ */
  }

  /* タグ（ラインと文字）を中央に */
  .vision-tag-wrap {
    justify-content: center;
    width: 100%;
  }

  /* 見出しの位置調整 */
  .vision-heading {
    text-align: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* --- 2. 「撮る」の2枚画像を中央配置 --- */

  .block-visual-dual {
    /* 縦並びのFlexbox設定 */
    display: flex;
    flex-direction: column;
    /* ★重要：子要素（画像）を左右中央に寄せる */
    align-items: center;

    height: auto !important;
    gap: 20px;
  }

  .block-visual-dual .img-top,
  .block-visual-dual .img-bottom {
    /* 幅80%の画像を中央に配置 */
    margin: 0 auto !important;

    /* 位置リセット */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
}

.drone-expert-page .section-padding {
  padding: 0;
  padding-bottom: 100px;
}

/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* =========================================
   Dream Farmの想い (Mission Page)
   ========================================= */
/* このセクション内のコンテナだけ幅を広げる */
.mission-content .container {
  max-width: 1450px !important; /* 標準より大きく広げる */
  width: 95%; /* 画面端に少し余白を残す */
  margin: 0 auto;
}
/* ヘッダー画像 */
.mission-header-bg {
  background-image: url("../images/mission_header_02.webp"); /* 風景や農作業の情緒的な写真 */
  background-size: cover;
  background-position: center;
}

/* --- ページ全体の設定 --- */
.mission-content {
  background-color: #fff;
  padding-bottom: 50px;
  background-image: linear-gradient(rgba(74, 144, 226, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 144, 226, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  overflow: clip !important;
}

/* レイアウト枠 */
.split-layout {
  display: flex;
  align-items: flex-start; /* 上揃え */
  gap: 60px;
  position: relative;
}

/* --- 左側：追従サイドバー --- */
.side-nav-wrapper {
  width: 280px;
  position: sticky;
  top: 150px;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 1);
  z-index: 10;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid #f0f0f0;
}

.nav-list li {
  margin-bottom: 0;
}

.nav-list a {
  display: block;
  text-decoration: none;
  padding: 15px 0 15px 25px;
  color: #999;
  position: relative;
  transition: all 0.3s ease;
}

.nav-list a .num {
  display: block;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 5px;
}

.nav-list a .text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
}

/* アクティブ状態・ホバー状態 */
.nav-list a.active,
.nav-list a:hover {
  color: var(--color-main);
}

/* アクティブ時の左線マーカー */
.nav-list a::before {
  content: "";
  position: absolute;
  left: -2px; /* ボーダーの上に重ねる */
  top: 0;
  width: 3px;
  height: 0%; /* 最初は高さ0 */
  background-color: var(--color-main);
  transition: height 0.3s ease;
}

.nav-list a.active::before {
  height: 100%; /* アクティブ時に伸びる */
}

/* --- 右側：メインコンテンツ --- */
.main-scroll-content {
  flex: 1; /* 残りの幅を全部使う */
  width: 100%;
}

/* 各セクション（初期状態） */
.scroll-item {
  margin-bottom: 150px;
  opacity: 0; /* 最初は消しておく */
  transform: translateY(50px); /* 下にずらしておく */
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); /* ふわっと出る設定 */
  position: relative;
  margin-bottom: 150px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);

  /* 数値を大きくして、停止位置をさらに下げる */
  scroll-margin-top: 200px;
}

/* 表示状態（JSで付与） */
.scroll-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 内部レイアウト --- */
.mission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 120px;
  margin-bottom: 150px;
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  /* 行の基準設定 */
  position: relative;
  z-index: 1;
}

.mission-row.reverse {
  flex-direction: row-reverse;
}

/* =========================================
   背景イラスト装飾（修正版）
   ========================================= */

/* 背景レイヤー共通設定 */
.mission-bg-layer {
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;

  /* ★修正1：枠いっぱいに広げる（隙間をなくしてマスクを確実に効かせる） */
  background-size: cover !important;

  /* ★修正2：マスクの中心と合わせるため、画像も中央配置にする */
  background-position: center !important;

  opacity: 0.15;
  pointer-events: none;

  /* ★修正3：ぼかし範囲の調整 */
  /* ellipse（楕円）を使い、中心30%はハッキリ見せ、70%の位置で完全に透明にする */
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);

  transform: rotate(-5deg);
}

/* --- 各セクションごとの配置 --- */

/* 1. 成長・芽吹き */
.layer-01 {
  top: -10%;
  right: -15%;
  width: 70%;
  /* 高さを十分に取ることで、上下のぼかしが見えるスペースを作る */
  height: 120%;
  background-image: url("../images/mission_0101.jpg");
  /* 個別の position/size 指定は削除（共通設定 cover/center を優先） */
}

/* 2. インフラ・安定 */
.layer-02 {
  top: 5%;
  left: -20%;
  width: 80%;
  height: 120%;
  transform: rotate(5deg);
  background-image: url("../images/mission_0201.jpg");
}

/* 3. 風景・山並み */
.layer-03 {
  /* 位置調整 */
  top: auto;
  bottom: -20%;
  right: -20%;
  width: 90%;
  height: 120%; /* 高さを増やして上下の切れを防ぐ */
  transform: none;
  background-image: url("../images/mission_0301.jpg");

  /* 
     ★重要：以前の「linear-gradient（上だけぼかす）」設定を削除または上書きし、
     共通設定の「radial-gradient（上下左右ぼかす）」を適用させます。
     
     もしこの記述が残っていると、上下左右のぼかしが効きません。
     ↓ 下記のように unset するか、記述自体を削除してください。
  */
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%) !important;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%) !important;
}

/* 全体の高さ調整 */
.layer-01,
.layer-02,
.layer-03 {
  height: 150%; /* 余白をたっぷりとる */
}
/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .mission-bg-layer {
    width: 100%;
    height: 100%;
    opacity: 0.1; /* スマホでは文字被りを避けるため少し薄く */
    transform: none; /* 回転リセット */
  }

  .layer-01 {
    top: 0;
    right: -10%;
  }
  .layer-02 {
    top: 10%;
    left: -10%;
  }
  .layer-03 {
    bottom: -10%;
    right: 0;
    background-size: contain;
  }
}

/* --- 画像エリア --- */
.mission-img {
  width: 45%;
  position: relative;
  z-index: 2;
}

.mission-img .img-clipper {
  width: 100%;
  height: 400px;
  border-radius: 4px !important;
  transform: skewX(-12deg);
  overflow: hidden;
  box-shadow: 20px 20px 0 rgba(74, 144, 226, 0.1);
  position: relative;
  z-index: 2;
  transition: all 0.5s ease;
}

.mission-row.reverse .img-clipper {
  border-radius: 4px !important;
}

/* 画像本体 */
.mission-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: skewX(12deg) scale(1.2);
  transition: transform 0.6s ease;
}

.mission-row:hover .mission-img img {
  transform: skewX(12deg) scale(1.3);
}

.mission-row:hover .img-clipper {
  box-shadow: 25px 25px 0 rgba(74, 144, 226, 0.2);
  transform: skewX(-12deg) translateY(-5px);
}

/* 背景の巨大数字（位置調整） */
.mission-img .bg-num {
  top: -40px;
  left: -20px;
  z-index: 1;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .mission-img .img-clipper {
    transform: none; /* スマホでは斜めを解除して見やすく */
    border-radius: 8px !important;
    height: 250px;
  }
  .mission-img img {
    transform: none; /* 画像の変形も解除 */
  }
}
/* --- テキストエリア --- */
.mission-text {
  width: 50%; /* 少し広げる */
  position: relative;
  z-index: 5; /* 画像の影より前に出す */
}
.mission-heading {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.3;
  color: #111;
  margin-bottom: 40px;
  border: none;
  padding-left: 0;
  position: relative;
  padding-left: 40px;
}

.mission-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px; /* 太いバー */
  height: 100%;
  background: linear-gradient(to bottom, var(--color-blue), var(--color-main));
  transform: skewX(-12deg);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
}

.mission-body .highlight {
  font-family: "Zen Kaku Gothic New", sans-serif;
  background: transparent;
  color: var(--color-blue);
  font-weight: 900;
  font-size: 1.1em;
  border-bottom: 4px solid var(--color-blue);
  padding: 0 4px 2px;
  margin: 0 2px;
  display: inline-block;
}

.mission-body p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.05rem;
  line-height: 2;
  color: #333;
  margin-bottom: 25px;
  text-align: left;
  font-weight: 400;
}

.mission-sign {
  font-family: "Great Vibes", cursive;
  font-size: 3.5rem;
  color: var(--color-accent);
  text-align: right;
  margin-top: 50px;
  margin-right: 20px;
  transform: rotate(-6deg);
  transform-origin: bottom right;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
  .mission-row,
  .mission-row.reverse {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 100px;
  }

  .mission-img,
  .mission-text {
    width: 100%;
  }

  .mission-img .img-clipper {
    height: 300px;
    border-radius: 20px !important; /* スマホでは角丸長方形に */
  }

  .mission-img .bg-num {
    font-size: 6rem;
    top: -30px;
    left: 0;
  }
  .mission-row.reverse .mission-img .bg-num {
    right: 0;
  }

  .mission-heading {
    font-size: 1.8rem;
    text-align: left;
  }
}
/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .mission-content {
    background-size: 20px 20px;
  }

  .mission-row,
  .mission-row.reverse {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 80px;
    border-bottom: none;
  }

  .mission-img,
  .mission-text {
    width: 100%;
  }

  .mission-img .img-clipper {
    height: 250px;
    box-shadow: 15px 15px 0 rgba(74, 144, 226, 0.1);
  }

  .mission-img .bg-num {
    font-size: 6rem;
    top: -40px;
    left: 0;
  }
  .mission-row.reverse .mission-img .bg-num {
    right: 0;
  }
  .mission-row {
    gap: 50px;
  }
  .mission-heading {
    font-size: 1.55rem;
    padding-left: 25px;
    border-left-width: 4px;
  }
  .mission-heading::before {
    width: 8px;
  }
  .mission-sign {
    font-size: 2.5rem;
    text-align: center; /* スマホでは中央寄せ */
    transform: rotate(-4deg);
    margin-right: 0;
  }
}
@media (max-width: 900px) {
  .split-layout {
    flex-direction: column; /* 縦積みに戻す */
  }

  /* スマホではサイドバーを非表示（または上部に固定） */
  .side-nav-wrapper {
    display: none;
  }

  .scroll-item {
    opacity: 1; /* アニメーションなしで表示 */
    transform: none;
    margin-bottom: 80px;
  }

  .mission-row,
  .mission-row.reverse {
    flex-direction: column;
  }
  .mission-img,
  .mission-text {
    width: 100%;
  }
}

/* =========================================
   Missionページ：プロローグエリア
   ========================================= */
.mission-prologue {
  text-align: center;
  padding: 100px 0 40px; /* 上下の余白で空間を埋める */
  background-color: #fff;
  opacity: 0; /* 最初は隠す */
  animation: prologueFadeIn 1.5s ease-out forwards;
  animation-delay: 0.5s; /* ページ表示後すぐに開始 */
}

/* サブタイトル（英語・筆記体） */
.prologue-sub {
  font-family: "Great Vibes", cursive;
  font-size: 2.5rem;
  color: var(--color-accent); /* 稲穂ゴールド */
  margin-bottom: 20px;
  transform: rotate(-5deg); /* 少し傾けて手書き感を */
  display: inline-block;
}

/* メインキャッチコピー */
.prologue-title {
  font-family: "Shippori Mincho", serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--color-main); /* テーマカラー */
  line-height: 1.6;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

/* 下へと続く導線ライン */
.prologue-line {
  width: 1px;
  height: 80px; /* 長めの線 */
  background: linear-gradient(to bottom, var(--color-main) 0%, rgba(221, 221, 221, 0) 100%);
  margin: 0 auto;
}

/* アニメーション定義 */
@keyframes prologueFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .mission-prologue {
    padding: 60px 0 20px;
  }
  .prologue-sub {
    font-size: 2rem;
  }
  .prologue-title {
    font-size: 1.35rem;
  }
  .prologue-line {
    height: 50px;
  }
}

/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------- */
/* =========================================
   ニュース一覧ページ (News List)
   ========================================= */

/* ヘッダー画像 */
.news-header-bg {
  background-image: url("../images/news_header.webp");
  background-size: cover;
  background-position: center;
}

/* --- カテゴリタブフィルター --- */
.news-filter {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 60px;
  list-style: none;
  padding: 0;
}
/*
.news-filter li {
  padding: 12px 35px;
  background-color: #f4f4f4;
  border-radius: 50px;
  color: #666;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  border: 1px solid transparent;
}


.news-filter li {
    padding: 0; 
    border: none;
    background: none;
}

.news-filter li:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}
    */
.news-filter li a {
  display: block;
  padding: 12px 35px;
  background-color: #f4f4f4;
  border-radius: 50px;
  color: #666;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.news-filter li a:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}
/* アクティブ時の色分け 
.news-filter li.active {
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.news-filter li[data-cat="all"].active {
  background-color: #333;
}
.news-filter li[data-cat="news"].active {
  background-color: var(--color-blue);
}
.news-filter li[data-cat="event"].active {
  background-color: var(--color-accent);
}
.news-filter li[data-cat="column"].active {
  background-color: var(--color-main);
}
  */
/* アクティブ状態 */
/* 特に指定がないカテゴリの Active 時の色（デフォルト：黒またはメインカラー） */
.news-filter li.active a {
  color: #fff;
  background-color: #333; /* または var(--color-main) */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* カテゴリごとの色分け */
.news-filter li[data-filter="news"].active a {
  background-color: var(--color-blue);
}
.news-filter li[data-filter="event"].active a {
  background-color: var(--color-accent);
}
.news-filter li[data-filter="column"].active a {
  background-color: var(--color-main);
}
/* --- 記事グリッド（トランジション用） --- */
.news-grid {
  transition: opacity 0.3s ease;
  min-height: 400px; /* ロード中も高さを確保 */
}

/* --- ページネーション --- 
.pagination {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pagination a,
.pagination span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-decoration: none;
  font-family: "Oswald", sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  transition: all 0.3s;
  background-color: #fff;
  border: 1px solid #ddd;
}

.pagination a:hover {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: #fff;
}

/* 現在のページ 
.pagination .current {
  background-color: var(--color-main);
  color: #fff;
  border-color: var(--color-main);
  pointer-events: none;
}
*/

/* --- ページネーション --- */
.pagination {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* WPが出力するクラスに対応 */
.pagination a,
.pagination .current {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-decoration: none;
  font-family: "Oswald", sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  border: 1px solid #ddd;
  background: #fff;
}

.pagination .current {
  background-color: var(--color-main);
  color: #fff;
  border-color: var(--color-main);
}

.pagination a:hover {
  background-color: var(--color-main);
  color: #fff;
}
/* データなし表示 */
.no-data {
  text-align: center;
  color: #999;
  padding: 50px 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .news-filter {
    flex-wrap: wrap;
    gap: 10px;
  }
  .news-filter li {
    padding: 8px 20px;
    font-size: 0.9rem;
    flex: 1 1 40%; /* 2列にする */
    text-align: center;
  }
}

/* =========================================
   ニュース一覧ページ (背景色修正)
   ========================================= */

/* セクション背景を「白」に変更 */
.news-archive-section {
  background-color: #ffffff; /* #f7f9f7 から変更 */
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
}

/* 上部ウェーブの色も「白」に合わせて馴染ませる */
.news-archive-section .section-wave-top svg path {
  fill: #ffffff; /* #f7f9f7 から変更 */
}

/* =========================================
   Drone Page: WORKS & BANNERS (Tech Style)
   ========================================= */

/* --- WORKS セクション --- */
.drone-works-section {
  background-color: #f8fcfd; /* 非常に薄い青グレー */
  /* 背景にテックなグリッドを敷く */
  background-image: linear-gradient(rgba(74, 144, 226, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 144, 226, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  padding-bottom: 60px; /* バナーとの間隔調整 */
}

/* タイトル調整 */
.tech-section-title {
  font-family: "Oswald", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
  color: #001a2d;
  letter-spacing: 0.1em;
}

.tech-section-title .sub-jp {
  display: block;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 1rem;
  color: var(--color-blue);
  letter-spacing: 0.05em;
  margin-top: 10px;
}

/* 記事グリッド */
.tech-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

/* 記事カード（シャープなデザイン） */
.tech-work-card {
  height: 100%;
  background: #fff;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
  /* 角丸なし */
  border-radius: 0;
}

.tech-work-card a {
  text-decoration: none !important;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.work-body {
  display: flex;
  flex-direction: column;
}

/* ホバー時の挙動 */
.tech-work-card a:hover {
  text-decoration: none !important;
}
/* タイトルや文章に下線がつかないよう念押し */
.work-body h3,
.work-excerpt {
  text-decoration: none !important;
}
.work-thumb {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tech-work-card:hover .work-thumb img {
  transform: scale(1.1);
}

/* カテゴリラベル */
.tech-cat {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #001a2d; /* 濃紺 */
  color: #fff;
  font-family: "Oswald", "BIZ UDPGothic", sans-serif;
  font-size: 0.75rem;
  padding: 4px 12px;
  letter-spacing: 0.1em;
}

.work-body {
  padding: 25px;
}

.work-body time {
  display: block;
  font-family: "Oswald", sans-serif;
  color: #999;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.work-body h3 {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #111;
}
.work-excerpt {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #666;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.work-excerpt {
  margin-top: auto;
}
/* VIEW MORE ボタン */
.tech-btn-wrap {
  text-align: center;
}
.tech-view-more {
  display: inline-block;
  padding: 12px 40px;
  border: 1px solid #001a2d;
  color: #001a2d;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: all 0.3s;
}
.tech-view-more:hover {
  background-color: #001a2d;
  color: #fff;
}

/* --- リンクバナーセクション --- */
.drone-links-section {
  padding: 0 0 100px; /* 下に余白 */
  background-color: #f8fcfd; /* 背景色を継続 */
}

.tech-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* バナーボタン（計器・システムメニュー風） */
.tech-banner-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #001a2d; /* 濃紺背景 */
  padding: 25px 30px;
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border-left: 4px solid var(--color-blue); /* 左に青いアクセントライン */
}

.tech-banner-link:hover {
  background-color: var(--color-blue); /* ホバーで青に */
  padding-left: 40px; /* 右に動くアニメーション */
}

.tech-banner-link .banner-content {
  display: flex;
  flex-direction: column;
}

.tech-banner-link .en {
  font-family: "Oswald", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 5px;
}

.tech-banner-link .ja {
  font-size: 0.85rem;
  opacity: 0.8;
}

.tech-banner-link .banner-icon {
  font-size: 1.5rem;
  opacity: 0.5;
}

/* スマホ対応 */
@media (max-width: 900px) {
  .tech-works-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .tech-banner-grid {
    grid-template-columns: 1fr; /* 縦積み */
  }
  .tech-banner-link {
    padding: 20px;
  }
}

/* --- 協賛・提携バナーセクション --- */
.tech-partner-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/* カードの幅 */
.partner-card {
  /* 
       PCは3列なので、幅は (100% - 隙間2つ分) ÷ 3 
       calc((100% - 60px) / 3)
    */
  width: calc((100% - 60px) / 3);

  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #eee;
  text-decoration: none !important;
  color: inherit;
  transition: all 0.3s ease;
  border-radius: 4px;
  overflow: hidden;
}

.partner-card:hover {
  text-decoration: none !important;
  border-color: var(--color-blue);
  box-shadow: 0 15px 40px rgba(74, 144, 226, 0.12);
  transform: translateY(-5px);
}
/* 中のテキスト部分（念のため） */
.partner-name,
.partner-desc {
  text-decoration: none !important;
}
/* ★画像表示エリア */
.partner-logo-box {
  width: 100%;
  height: auto;
  padding: 0 !important;
  background-color: #eee;
  overflow: hidden;
  position: relative;
  line-height: 0;
}

.partner-logo-box img {
  width: 100%;
  height: auto;
  display: block;
  filter: none !important;
  opacity: 1 !important;
  transition: transform 0.4s ease;
}

.partner-card:hover .partner-logo-box img {
  transform: scale(1.05);
}

/* テキストエリア */
.partner-content {
  padding: 20px 15px;
  text-align: center;
  background-color: #fafafa;
  flex-grow: 1;
  border-top: none;
}
/* スマホ対応：高さを少し抑える */
@media (max-width: 768px) {
  .partner-logo-box {
    height: 140px;
  }
}
.partner-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 6px;
}

.partner-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 6px;
  text-decoration: none !important;
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
  .tech-partner-grid {
    gap: 15px;
    padding: 0 15px;
  }

  /* タブレット・スマホは2列 */
  .partner-card {
    width: calc((100% - 15px) / 2);
  }
  .partner-logo-box {
    height: 100px;
    height: auto;
    padding: 20px;
  }
  .partner-logo-box {
    /* 高さは画像なりゆきでOK */
    padding: 0;
  }
  .partner-name {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .partner-card {
    width: 100%;
  }
  .tech-partner-grid {
    grid-template-columns: 1fr; /* 非常に狭い画面では1列 */
  }
}

/* パートナーカード */
.partner-banner {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #eee;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 4px; /* テック系に合わせて角丸は控えめ */
}

.partner-banner:hover {
  border-color: var(--color-blue);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transform: translateY(-3px);
}

/* ロゴエリア */
.partner-logo {
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  margin-right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #eee;
  padding-right: 15px;
}

/* ホバーで色が戻る（グレースケール解除）演出はプロフェッショナルな印象を与えるため継続を推奨します */
.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}
.partner-banner:hover .partner-logo img {
  filter: grayscale(0%);
  opacity: 1;
}

/* テキスト情報 */
.partner-info {
  display: flex;
  flex-direction: column;
}

.partner-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
  margin-bottom: 4px;
}

.partner-desc {
  font-size: 0.75rem;
  color: #999;
}

/* スマホ対応 */
@media (max-width: 900px) {
  .tech-partner-grid {
    grid-template-columns: 1fr; /* 1列 */
    padding: 0 10px;
  }

  .partner-banner {
    padding: 15px;
  }
}

/* =========================================
   ドローンページ：特定セクションの幅拡張
   ========================================= */

/* 「活動報告」と「パートナー」のコンテナ幅のみを1500pxに上書き */
.drone-works-section .container,
.drone-partners-section .container {
  max-width: 1500px !important;
  width: 94%;
  margin: 0 auto;
}

.work-thumb {
  height: 260px !important;
}

.partner-logo-box {
  min-height: 160px;
}

/* --- スマホ表示では全幅にリセット --- */
@media (max-width: 768px) {
  .drone-works-section .container,
  .drone-partners-section .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 20px !important;
  }

  .work-thumb {
    height: 200px !important;
  }
  .partner-logo-box {
    min-height: 100px;
  }
}

/* --- アクセスセクション：2カラムグリッド --- */
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  gap: 40px; /* マップ同士の間隔 */
  margin-top: 40px;
}

.access-item {
  width: 100%;
}

/* 各拠点のタイトル */
.access-sub-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-main);
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  padding-bottom: 10px;
}

.access-sub-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 2px;
}

.access-map {
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  line-height: 0;
}

.access-map iframe {
  width: 100%;
  height: 400px;
}

/* --- スマホ対応 --- */
@media (max-width: 900px) {
  .access-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .access-map iframe {
    height: 300px;
  }
}

/* =========================================
   送信完了ページ (Thanks)
   ========================================= */

.thanks-section {
  background-color: #fff;
  padding-bottom: 100px;
}

.thanks-box {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  padding: 80px 40px;
  border-radius: 20px;
  /* フォームと同じ柔らかい影と枠線 */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

/* アイコン */
.thanks-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 30px;
  color: var(--color-main); /* 早苗グリーン */
}
.thanks-icon svg {
  width: 100%;
  height: 100%;
}

/* タイトル */
.thanks-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-main);
  margin-bottom: 30px;
  line-height: 1.4;
}

/* 本文 */
.thanks-body p {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

/* 注釈（少し小さく） */
.thanks-body .note {
  font-size: 0.9rem;
  color: #888;
  background-color: #fafafa;
  padding: 15px;
  border-radius: 8px;
  display: inline-block;
  text-align: left;
}

/* ボタンエリア */
.thanks-btn-wrap {
  margin-top: 50px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .thanks-box {
    padding: 50px 20px;
  }
  .thanks-title {
    font-size: 1.6rem;
  }
  .thanks-body .note {
    font-size: 0.85rem;
  }
}

/* =========================================
   プライバシーポリシー (Privacy Policy)
   ========================================= */

.privacy-page {
  background-color: #fff;
}

/* 記事用の狭いコンテナ */
.container-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 25px;
}

.privacy-intro {
  margin-bottom: 60px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
}

.privacy-item {
  margin-bottom: 60px;
}

/* 条項の見出し */
.privacy-item h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-main); /* 早苗グリーン */
  margin-bottom: 20px;
  padding-left: 15px;
  border-left: 5px solid var(--color-accent); /* 稲穂ゴールドのアクセント */
}

.privacy-item p,
.privacy-item li {
  font-size: 1rem;
  line-height: 2;
  color: #333;
  margin-bottom: 15px;
}

.privacy-item ol,
.privacy-item ul {
  margin-bottom: 20px;
  padding-left: 1.5em;
}

/* お問い合わせ窓口のボックス */
.contact-window {
  background-color: #f7f9f7;
  padding: 40px;
  border-radius: 15px;
}

.contact-window h2 {
  border-left: none;
  padding-left: 0;
  text-align: center;
  margin-bottom: 30px;
}

.contact-window dl {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
  margin: 0 auto;
}

.contact-window dt {
  width: 30%;
  font-weight: bold;
  color: var(--color-main);
  margin-bottom: 10px;
}

.contact-window dd {
  width: 70%;
  margin-bottom: 10px;
  color: #333;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .privacy-item h2 {
    font-size: 1.25rem;
  }
  .contact-window {
    padding: 30px 20px;
  }
  .contact-window dt,
  .contact-window dd {
    width: 100%;
  }
  .contact-window dt {
    margin-bottom: 5px;
  }
}

/* =========================================
   Missionページ専用ヘッダーデザイン
   ========================================= */

.mission-page-header {
  height: 450px;
  display: flex;
  align-items: center;
}

.page-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* ロゴとタイトルの間隔 */
  position: relative;
  z-index: 10;
}

/* ロゴのサイズと質感 */
.mission-page-logo {
  flex-shrink: 0;
}

.mission-page-logo img {
  /* 以前の 100px から 160px に拡大（インパクト重視） */
  height: 160px;
  width: auto;

  /* 青空に映えるよう、白抜き＋少し強めの影を適用 */
  filter: brightness(0) invert(1) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.25));

  /* 画像自体の余白を消して大きく見せる */
  display: block;
}

/* --- ロゴが大きくなった分、区切り線も長くする --- */
.title-divider {
  width: 1px;
  /* 60px から 100px に延長 */
  height: 100px;
  background: linear-gradient(to bottom, transparent, #fff, transparent);
  opacity: 0.6;
  margin: 0 10px; /* 隙間の微調整 */
}

/* タイトルテキストの調整 */
.mission-page-header .title-text {
  text-align: left;
}

.mission-page-header .page-title {
  margin: 0;
  text-align: left;
}

.mission-page-header .page-title .en {
  margin-bottom: 5px;
  font-size: 1.4rem;
}

.mission-page-header .page-title .ja {
  font-size: 2.6rem;
  font-weight: 800;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .page-title-wrap {
    flex-direction: column; /* 縦並びに */
    gap: 20px;
  }

  .mission-page-logo img {
    height: 100px; /* スマホでもしっかり見えるサイズに */
  }

  .title-divider {
    width: 60px;
    height: 1px;
    margin: 10px 0;
  }

  .mission-page-header .title-text {
    text-align: center;
  }
  .mission-page-header .page-title {
    text-align: center;
  }
}

/* =========================================
   下層ページ共通：ロゴ付きヘッダーデザイン
   ========================================= */

/* 各ページのヘッダークラスすべてに適用 */
.mission-page-header,
.machine-page-header,
.inheritance-page-header,
.support-page-header,
.page-header {
  height: 450px;
  display: flex;
  align-items: center;
}

/* ロゴとタイトルのレイアウト枠 */
.page-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: relative;
  z-index: 10;
}

/* ロゴのサイズ（160pxのインパクトサイズ） */
.mission-page-logo img {
  height: 160px; /* 特大サイズ */
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.25));
  display: block;
}

/* 中央のスタイリッシュな区切り線 */
.title-divider {
  width: 1px;
  height: 100px; /* ロゴに合わせた長さ */
  background: linear-gradient(to bottom, transparent, #fff, transparent);
  opacity: 0.6;
  margin: 0 10px;
}

/* タイトルテキストの調整 */
.title-text {
  text-align: left;
}

.page-title {
  margin: 0 !important;
  text-align: left !important;
}

.page-title .en {
  margin-bottom: 5px !important;
  font-size: 1.4rem !important;
  color: var(--color-accent) !important;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page-title .ja {
  font-size: 2.6rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2;
}

/* --- スマホ対応（中央揃え・縦並び） --- */
@media (max-width: 768px) {
  .page-title-wrap {
    flex-direction: column;
    gap: 20px;
  }

  .mission-page-logo img {
    height: 100px; /* スマホでは100pxに調整 */
  }

  .title-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, #fff, transparent);
  }

  .title-text,
  .page-title {
    text-align: center !important;
  }

  .page-title .ja {
    font-size: 1.8rem !important;
  }
}

/* =========================================
   横長パートナーバナー (Paditch用)
   ========================================= */

.partner-wide-section {
  background-color: #fff;
  padding-bottom: 120px;
}

/* バナー本体 */
.partner-banner-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;

  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;

  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);

  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

.partner-banner-wide:hover {
  box-shadow: 0 15px 30px rgba(107, 191, 89, 0.15); /* グリーンの影 */
  border-color: var(--color-main);
  transform: translateY(-3px);
}

/* ロゴエリア */
.wide-logo-box {
  flex: 0 0 240px; /* 幅固定 */
  margin-right: 40px;
  text-align: center;
}

.wide-logo-box img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* テキストエリア */
.wide-content-box {
  flex: 1; /* 残りの幅を使う */
  text-align: left;
}

.wide-label {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 0.75rem;
  background-color: var(--color-main);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.wide-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: #333;
}

.wide-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
}

/* アイコンエリア */
.wide-icon {
  flex: 0 0 40px;
  margin-left: 20px;
  color: #ccc;
  transition:
    color 0.3s,
    transform 0.3s;
}
.wide-icon svg {
  width: 30px;
  height: 30px;
}

.partner-banner-wide:hover .wide-icon {
  color: var(--color-main);
  transform: translateX(5px);
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .partner-banner-wide {
    flex-direction: column;
    padding: 30px 20px;
    text-align: center;
  }

  .wide-logo-box {
    margin-right: 0;
    margin-bottom: 20px;
    width: 180px;
  }

  .wide-content-box {
    width: 100%;
    text-align: center;
  }

  .wide-title {
    font-size: 1.2rem;
  }

  .wide-desc br {
    display: none;
  }

  .wide-icon {
    margin-left: 0;
    margin-top: 20px;
    transform: rotate(90deg); /* 下矢印にする */
  }
  .partner-banner-wide:hover .wide-icon {
    transform: rotate(90deg) translateY(5px);
  }
}