/* ===================== Layout Helpers ===================== */
/* 共通のレイアウト補助クラスをまとめたセクション */

/* フロントページ全体にスナップスクロールを適用 */
body.home,
body.page-template-front-page,
body:has(.top) {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  overflow-x: hidden;
}

/* トップページ専用のセクションコンテナ（スナップスクロール対応、縦方向フレックス、中央揃え） */
.top__section {
  min-height: 80vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  max-width: 1280px;
  margin: clamp(20px, 4vw, 48px) auto;
  padding-inline: clamp(16px, 5vw, 64px);
  width: 100%;
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vw, 32px);
}

/* Newsセクション専用のコンテナ（top__sectionと同じスタイルを使用） */
/* top__sectionのスタイルを継承するため、個別のスタイルは削除 */

/* ニュースセクションの追加スタイル（最小高さ80vh、上揃え） */
.top__news.top__section {
  min-height: auto;
  justify-content: flex-start;
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(32px, 5vw, 72px);
  margin-top: clamp(20px, 4vw, 48px);
  margin-bottom: clamp(20px, 4vw, 48px);
  margin-left: auto;
  margin-right: auto;
}

/* フロントページ専用のボタン（インラインブロック、角丸、ホバーエフェクト付き） */
.button {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid #111;
  border-radius: 10px;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}

/* ボタンのホバー状態（上に移動、透明度変化） */
.button:hover {
  transform: translateY(-1px);
  opacity: .9;
}

.button--primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ゴーストボタン（透明背景、黒文字） */
.button--ghost {
  background: transparent;
  color: #111;
}

/* ===================== Hero ===================== */
/* トップヒーローセクションの基礎レイアウト（全画面高さ、スナップスクロール対応） */
.top__hero {
  position: relative;
  overflow: clip;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ヒーローセクションのスライダーコンテナ（全画面、背景レイヤー） */
.top__hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  padding: 0;
}

/* ヒーローセクションのスライド画像（全画面、フェードイン・アウトアニメーション） */
.top__hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  display: block;
}

/* アクティブなスライド画像（完全に表示） */
.top__hero-slide--active {
  opacity: 1;
}

/* スライド画像内のimg要素（全画面、カバー表示） */
.top__hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
}

/* ヒーローセクションの背景画像（全画面、背景レイヤー） */
.top__hero-image,
.top__hero .wp-block-image:not(.top__hero-slide):not(.top__hero-logo) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  padding: 0;
  display: block;
}

/* ヒーローセクションの背景画像内のimg要素（全画面、カバー表示） */
.top__hero-image img,
.top__hero .wp-block-image:not(.top__hero-slide):not(.top__hero-logo) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
}

/* ヒーローセクションのオーバーレイ（グラデーション、ポインターイベント無効） */
.top__hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ヒーローセクションの内部コンテナ（中央揃え、グリッドレイアウト） */
.top__hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  height: 100vh;
  width: 100%;
}
/* ヒーローセクションのロゴ（固定位置、中央配置、スクロール追従アニメーション） */
.wp-block-image.top__hero-logo,
.top__hero .wp-block-image.top__hero-logo,
.top__hero-logo {
  position: fixed;
  top: var(--hero-logo-top, 50%);
  left: var(--hero-logo-left, 50%);
  transform: var(--hero-logo-transform, translate(-50%, -50%) scale(1));
  z-index: 1000;
  margin: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  transition: top 2s cubic-bezier(0.4, 0, 0.2, 1), left 2s cubic-bezier(0.4, 0, 0.2, 1), transform 2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0.4s ease;
  opacity: 1;
  visibility: visible;
}
/* ヒーローロゴが固定位置に到達した状態（トランジション設定） */
.wp-block-image.top__hero-logo.is-stuck,
.top__hero .wp-block-image.top__hero-logo.is-stuck,
.top__hero-logo.is-stuck {
  transition: top 2s cubic-bezier(0.4, 0, 0.2, 1), left 2s cubic-bezier(0.4, 0, 0.2, 1), transform 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ヒーローロゴがスクロールで非表示になった状態（フェードアウト） */
.wp-block-image.top__hero-logo.scrolled,
.top__hero .wp-block-image.top__hero-logo.scrolled,
.top__hero-logo.scrolled {
  opacity: 0;
  visibility: hidden;
  transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1), left 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease 0s, visibility 0.6s ease 0s;
}

/* メニューが開いているときにヒーローロゴを非表示 */
body.menu-open .wp-block-image.top__hero-logo,
body.menu-open .top__hero .wp-block-image.top__hero-logo,
body.menu-open .top__hero-logo {
  opacity: 0;
  visibility: hidden;
}
/* ヒーローロゴ内のimg要素（レスポンシブサイズ、アスペクト比維持） */
.wp-block-image.top__hero-logo img,
.top__hero .wp-block-image.top__hero-logo img,
.top__hero-logo img {
  width: clamp(160px, 30vw, 340px);
  height: auto;
  display: block;
  opacity: 1;
}

/* ヒーロー内のコピーとCTAボタンの視認性を確保（白文字、中央揃え、テキストシャドウ） */
.top__hero-copy {
  color: #fff;
  max-width: 900px; width: 100%;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
/* ヒーローセクションのCTAボタンコンテナ（中央揃え、フレックス、折り返し可能） */
.top__hero-cta { margin-top: 20px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===================== Section Title ===================== */
/* 全セクション共通の見出し装飾（レスポンシブフォントサイズ、左揃え） */
.top__sectionTitle { 
  font-size: clamp(22px, 2.6vw, 28px); 
  margin: 56px 0 18px; 
  text-align: left;
}
/* 中央揃えのセクションタイトル（マージン調整） */
.top__sectionTitle--center {
  margin-top: 0;
  margin-bottom: clamp(16px, 4vw, 32px);
  text-align: center;
  width: 100%;
}

/* セクションタイトルの疑似要素を非表示（デフォルト） */
.top__sectionTitle::after {
  display: none;
}

/* ニュースセクション（中央揃え） */
.top__news {
  text-align: center;
}
/* ニュースコンテナのアイテムを中央揃えに配置 */
.top__news-container {
  align-items: center;
}
/* ニュースセクションのタイトル（インラインブロック、中央揃え、下線用パディング） */
.top__news .top__sectionTitle {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-bottom: 12px;
  margin-top: 0;
  margin-bottom: 16px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* ニュースセクションのタイトル下線（緑色、角丸） */
.top__news .top__sectionTitle::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #2D5016;
  border-radius: 2px;
}

/* ===================== Indoor Aquaculture Section ===================== */
/* 陸上養殖紹介ブロックのレイアウト（全画面高さ、縦方向フレックス、中央揃え） */
.top__indoor-aquaculture {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 64px);
}
/* 陸上養殖セクションのコンテナ（縦方向フレックス） */
.top__indoor-aquaculture-container {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
}
/* 陸上養殖セクションの画像エリア（レスポンシブ時は上に配置） */
.top__indoor-aquaculture-image {
  width: 100%;
  order: 1;
}
/* 陸上養殖セクションの画像（全幅、角丸、カバー表示） */
.top__indoor-aquaculture-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}
/* 陸上養殖セクションのコンテンツエリア（レスポンシブ時は画像の下に配置） */
.top__indoor-aquaculture-content {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 32px);
}
/* 陸上養殖セクションの説明文（初期状態は非表示、ビューポートに入ったときにフェードイン） */
.top__indoor-aquaculture-description {
  width: 100%;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 2.2;
  color: #444;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  /* 3つのセクションの説明文を統一 */
}
/* 陸上養殖セクションの説明文内の段落テキスト（下マージン16px） */
.top__indoor-aquaculture-description p {
  margin-bottom: 16px;
}
/* 陸上養殖セクションの説明文の最後の段落の下マージンを削除 */
.top__indoor-aquaculture-description p:last-child {
  margin-bottom: 0;
}
/* 陸上養殖セクションの説明文がビューポートに入ったときに表示（フェードイン） */
.top__indoor-aquaculture-description.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== About Section ===================== */
/* 企業紹介セクションのレイアウト（全画面高さ、縦方向フレックス、中央揃え） */
.top__about {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0; /* セレクタの詳細度で対応 */
  margin-top: 0; /* セレクタの詳細度で対応 */
  padding-bottom: clamp(32px, 5vw, 64px);
}
/* ABOUTセクションの上のマージンを削除（NEWSセクションとの間の余白をなくす） */
.top__about.top__section {
  margin-top: 0; /* セレクタの詳細度で対応 */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(20px, 4vw, 48px);
}
/* 企業紹介セクションでフェードアップアニメーションを無効化 */
.top__about.io-fadeup {
  opacity: 1;
  transform: none;
}
/* 企業紹介セクションのタイトル（インラインブロック、中央揃え、下パディング40px） */
.top__about .top__sectionTitle {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-bottom: 40px;
  margin-top: 0;
  margin-bottom: 16px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* ABOUTセクションで下層へ誘導するスクロールリンク（左右アニメーション付き、角丸ボタン） */
.top__about-scroll-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  margin-top: 24px;
  margin-left: auto;
  padding: 12px 20px;
  border: 2px solid #333;
  border-radius: 50px;
  cursor: pointer;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  width: fit-content;
  margin-left: auto;
  animation: slideLeftRight 2s ease-in-out infinite;
}
/* スクロールリンクのホバー状態（透明度変化、背景色追加、アニメーション一時停止） */
.top__about-scroll-link:hover {
  opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.05);
  animation-play-state: paused;
}
/* スクロールリンクのテキスト部分 */
.top__about-scroll-text {
  display: inline-block;
}
/* スクロールリンクの矢印アイコン（ホバー時に右に移動） */
.top__about-scroll-arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}
/* スクロールリンクのホバー時に矢印を右に移動 */
.top__about-scroll-link:hover .top__about-scroll-arrow {
  transform: translateX(5px);
}
@keyframes slideLeftRight {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}
/* セクション汎用ボタン（ABOUTスクロールと同じテイスト） */
.top__section-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  margin-top: 24px;
  margin-left: auto;
  padding: 12px 20px;
  border: 2px solid #333;
  border-radius: 50px;
  cursor: pointer;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  width: fit-content;
  animation: slideLeftRight 2s ease-in-out infinite;
}

.top__section-link:hover {
  opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.05);
  animation-play-state: paused;
}

.top__section-link__text {
  display: inline-block;
}

.top__section-link__arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.top__section-link:hover .top__section-link__arrow {
  transform: translateX(5px);
}
/* 企業紹介セクションのコンテナ（縦方向フレックス） */
.top__about-container {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 5vw, 48px);
  width: 100%;
}
/* 企業紹介セクションのコンテンツエリア（画像の下に配置、左揃え） */
.top__about-content {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 32px);
  text-align: left;
}

/* 企業紹介セクションの画像エリア（上に配置、全幅） */
.top__about-image {
  order: 1;
  width: 100%;
}
/* 企業紹介セクションの画像（全幅、角丸、カバー表示） */
.top__about-image img {
  width: 80%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}
/* 企業紹介セクションの説明文（初期状態は非表示、ビューポートに入ったときにフェードイン） */
.top__about-description {
  width: 100%;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 2.2;
  color: #444;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  /* 3つのセクションの説明文を統一 */
}
/* 企業紹介セクションの説明文がビューポートに入ったときに表示（フェードイン） */
.top__about-description.is-inview {
  opacity: 1;
  transform: translateY(0);
}
/* 企業紹介セクションのコンテンツのフェードインアニメーション初期状態（IntersectionObserver用） */
.top__about-content.io-fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
/* 企業紹介セクションのコンテンツがビューポートに入ったときに表示（フェードイン） */
.top__about-content.io-fadeup.is-inview {
  opacity: 1;
  transform: translateY(0);
}
/* 企業紹介セクションのコンテンツの最後の子要素の下マージンを削除 */
.top__about-content > *:last-child {
  margin-bottom: 0;
}
/* 企業紹介セクションの説明文内の段落テキスト（下マージン16px） */
.top__about-description p {
  margin-bottom: 16px;
  font-size: inherit;
  line-height: inherit;
}
/* 企業紹介セクションの説明文の最後の段落の下マージンを削除 */
.top__about-description p:last-child {
  margin-bottom: 0;
}
/* 企業紹介セクションのサブタイトル（中太字、グレー色） */
.top__about-subtitle {
  font-size: 20px;
  font-weight: 500;
  margin: 32px 0 16px;
  color: #333;
}
/* 企業紹介セクションのリスト（リストスタイルなし） */
.top__about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
/* 企業紹介セクションのリスト項目（左パディング24px、グレー色） */
.top__about-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  line-height: 1.8;
  color: #444;
}
/* 企業紹介セクションのリスト項目のマーカー（中黒、左側配置） */
.top__about-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #111;
  font-weight: 500;
}

/* ===================== Workplace Section ===================== */
/* 職場環境を紹介するセクション（全画面高さ、縦方向フレックス、中央揃え） */
.top__workplace {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 64px);
  margin-bottom: 56px;
}
/* 職場環境セクションのコンテナ（縦方向フレックス） */
.top__workplace-container {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 5vw, 48px);
  width: 100%;
}
/* 職場環境セクションの画像エリア（レスポンシブ時は上に配置） */
.top__workplace-image {
  width: 100%;
  order: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 32px);
}
/* 職場環境セクションの画像（全幅、角丸、カバー表示） */
.top__workplace-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}
/* 職場環境セクションのコンテンツエリア（レスポンシブ時は画像の下に配置） */
.top__workplace-content {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 32px);
}
/* 職場環境セクションの説明文（初期状態は非表示、ビューポートに入ったときにフェードイン） */
.top__workplace-description {
  width: 100%;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 2.2;
  color: #444;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  /* 3つのセクションの説明文を統一 */
}
/* 職場環境セクションの説明文内の段落テキスト（下マージン16px） */
.top__workplace-description p {
  margin-bottom: 16px;
}
/* 職場環境セクションの説明文の最後の段落の下マージンを削除 */
.top__workplace-description p:last-child {
  margin-bottom: 0;
}
/* 職場環境セクションの説明文がビューポートに入ったときに表示（フェードイン） */
.top__workplace-description.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== EC Site Section ===================== */
/* ECサイト紹介コンテンツのスタイル（フッターヒーローと同じ構造） */
.top__ec-site {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  min-height: clamp(320px, 65vh, 640px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: auto;
}

/* ECサイトセクションの背景画像 */
.top__ec-site-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ECサイト背景画像内のimg（全画面フィット＆カバー配置） */
.top__ec-site-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

/* ECサイト背景にノイズ感を足す疑似要素（質感演出） */
.top__ec-site--noise::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.459);
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.85) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.85;
  pointer-events: none;
}

/* ECサイトセクションのキャプション（右側のグラデーション背景、中央揃え） */
.top__ec-site-caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 70%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.2rem);
  padding: clamp(0.6rem, 1.4vw, 1rem) clamp(1rem, 2.5vw, 1.8rem);
  color: #fff;
  z-index: 10;
  text-decoration: none;
  text-align: center;
  min-width: 0;
}

/* キャプション全体のホバー時は位置変化を抑制 */
.top__ec-site-caption:hover {
  transform: none;
}

/* キャプションの英字テキスト共通（大文字・トラッキング強め） */
.top__ec-site-caption-subtitle,
.top__ec-site-caption-title {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 700;
  color: #ffffff;
}

/* サブタイトル行（余白をなくしてコンパクトに） */
.top__ec-site-caption-subtitle {
  margin: 0;
}

/* メインタイトル行（ボーダー付きカプセルボタン風） */
.top__ec-site-caption-title {
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  padding: clamp(0.75rem, 1.8vw, 1.2rem) clamp(1.4rem, 3vw, 2.2rem);
  border-radius: 12px;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 0.7vw, 0.75rem);
  letter-spacing: 0.3em;
  transition: transform .25s ease;
}

/* タイトルのみホバーでわずかに浮かせる */
.top__ec-site-caption-title:hover,
.top__ec-site-caption-title:focus-visible {
  transform: translateY(-6px);
}
/* ECサイトセクションの説明文（最大幅600px、グレー色） */
.top__ec-site-description {
  line-height: 1.8;
  color: #444;
  max-width: 600px;
}
/* ECサイトセクションの説明文内の段落テキスト（下マージン16px） */
.top__ec-site-description p {
  margin-bottom: 16px;
}
/* ECサイトセクションのボタン（上マージン8px） */
.top__ec-site-button {
  margin-top: 8px;
}

/* ===================== Video Background Section ===================== */
/* 背景動画を使ったダイナミック演出用セクション（全幅、相対位置） */
.top__video-bg {
  width: 100%;
  margin: 0;
  position: relative;
}

/* スクロールに合わせてビデオをピン留めし立体感を演出（スティッキーポジション、高さ320vh） */
.top__video-bg--pinned {
  max-width: none;
  padding: 10vh 0;
  min-height: auto;
  justify-content: flex-start;
  display: block;
  position: relative;
  height: var(--video-section-height, 320vh);
  margin-bottom: calc(var(--video-section-height, 320vh) * -0.6875);
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
/* ビデオ背景のメディアコンテナ（全幅、オーバーフロー制御） */
.top__video-bg__media {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  position: relative;
  border: none;
  outline: none;
}
/* ビデオ背景のvideo要素（全画面、カバー表示） */
.top__video-bg__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}
/* ピン留めされたビデオ背景のメディア（スティッキーポジション、レスポンシブ高さ、シャドウ） */
.top__video-bg--pinned .top__video-bg__media {
  /* 画面サイズに応じて高さをなめらかに変える（スマホでは低め、PCでは最大380px） */
  height: clamp(220px, 40vh, 380px);
  position: sticky;
  top: max(16px, calc(50vh - 190px));
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
}
/* インライン表示のビデオ背景（全画面幅、スナップスクロール対応） */
.top__video-bg--inline {
  min-height: auto;
  width: 100vw;
  max-width: none;
  padding: 0;
  margin: clamp(32px, 5vw, 72px) 0 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  z-index: 0;
  border: none;
  outline: none;
}

/* WORKPLACEセクション専用のビデオ背景（外枠余白をゼロに） */
.top__video-bg--workplace.top__section {
  min-height: auto;
  padding: 0;
  margin: 0;
}

/* 追加の相対配置指定（後続コンテンツのオーバーレイ対策） */
.top__video-bg--inline {
  position: relative;
}

/* インラインビデオ直後のセクションとの間隔を確保 */
.top__video-bg--inline + .top__section {
  margin-top: clamp(16px, 3vw, 32px);
}

/* フッターにかけての下部背景（100vwで左右余白をなくす） */
.top__lower-bg {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #000000 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 下部背景内の子要素にも全幅を強制 */
.top__lower-bg > * {
  width: 100%;
}

/* 下部背景内の中央レールコンテナ（max-width管理） */
.top__lower-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 64px);
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(64px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}

/* コンテナパッケージセクション本体 */
.top__container-package {
  width: 100%;
  margin: 0 auto;
}

/* 見出しのラッパー（上下にテキストを積む） */
.top__container-package__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
  text-align: center;
  width: 100%;
  max-width: 100%;
}

/* サブタイトル（英字・大文字・トラッキング強め） */
.top__container-package__headline .top__container-package__subtitle {
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: 0.2em;
  color: #0f1f2c;
  margin: 0;
  text-transform: uppercase;
  width: 100%;
  max-width: 100%;
}

/* メインタイトル（和文見出し） */
.top__container-package__headline .top__container-package__title {
  font-size: clamp(28px, 5vw, 46px);
  margin: 8px 0 0;
  color: #0f1f2c;
  font-weight: 400;
  width: 100%;
  max-width: 100%;
}

/* 図版を縦に並べるコンテナ（全幅＋余白調整） */
.top__container-package__sequence {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 28px);
  text-align: center;
}

/* 各コンテンツアイテム（中央揃えの縦レイアウト） */
.top__container-package__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(32px, 5vw, 64px) 0;
  gap: clamp(16px, 3vw, 24px);
}

/* アイテム内のメディア共通 */
.top__container-package__media img {
  display: block;
  max-width: min(100%, 960px);
  height: auto;
  margin: 0 auto;
}

/* Stepごとの微調整が必要な場合はここに限定して追加する（vh指定は極力避ける） */
.top__container-package__item--1 {
}

.top__container-package__item--2 {
}

/* Step 2: 2カラムレイアウト（PC: 2カラム / SP: 1カラム） */
/* 旧クラス名(top__container-package__item--2-columns)も一応サポートしておく */
.top__container-package__columns,
.top__container-package__item--2-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
}

/* Step 2: 各カラムのスタイル */
.top__container-package__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.top__container-package__column--center {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top__container-package__item--2-column-center {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top__container-package__media--center {
  max-width: 900px;
  width: min(900px, 90vw);
}

.top__container-package__item--2-column-center img {
  max-width: 900px;
  width: min(900px, 90vw);
  height: auto;
  display: block;
}

.top__package-equation {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.top__package-equation.is-inview {
  opacity: 1;
  transform: translateY(0);
}


/* レスポンシブ: スマホでは1カラムに */
@media (max-width: 768px) {
  .top__container-package__columns,
  .top__container-package__item--2-columns {
    grid-template-columns: 1fr;
    gap: clamp(16px, 3vw, 32px);
  }

  /* 中央のまとめイメージを非表示（SP） */
  .top__container-package__column--center,
  .top__container-package__column--center .top__package-equation,
  .top__package-equation,
  .top__package-equation.is-inview {
    display: none;
  }
}

.top__container-package__item--3 {
}

.top__container-package__item--4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
}

/* PCサイズのみ見出しとスライダーの間のスペースを開ける */
@media (min-width: 769px) {
  .top__container-package__item--4 .top__container-package__note {
    margin-bottom: clamp(32px, 5vw, 64px);
  }
}

.top__container-package__item--5 {
}

/* コンテナパッケージセクションの説明文（top__indoor-aquaculture-descriptionと同じサイズに統一） */
.top__container-package__description {
  width: 100%;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 2.2;
  color: #444;
}

.top__container-package__description p {
  margin-bottom: 16px;
}

.top__container-package__description p:last-child {
  margin-bottom: 0;
}

/* 画像の共通最大幅を統一 */
.top__container-package__item img {
  width: min(760px, 100%);
  max-width: 760px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Step 2の2カラム画像は上記のスタイルを上書き */
.top__container-package__item--2 .top__container-package__media img {
  width: 100%;
  max-width: min(700px, 90%);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
}

.top__container-package__media--center img {
  max-width: 100%;
  border-radius: 0;
  margin: 0 auto;
}

/* コンパクト版アイテムの画像幅を絞る */
.top__container-package__item--compact img {
  width: min(420px, 85%);
}

/* 3番目のアイテム（5-3.svg）の画像を小さく（アスペクト比を保持） */
/* --compactクラスよりも優先されるように、より具体的なセレクターを使用 */
/* 注意: --3と--compactの両方のクラスがある場合、--3のスタイルを優先 */
.top__container-package__item--compact:not(.top__container-package__item--3) img {
  width: min(420px, 85%);
}

/* より詳細なセレクタで優先度を上げる（!importantなし） */
figure.top__container-package__item.top__container-package__item--3.top__container-package__item--compact img {
  width: 180px;
  max-width: 180px;
  min-width: 180px;
  height: auto;
  object-fit: contain;
}

/* 3番目のfigure全体（compact以外も含む）を最小サイズに統一 */
figure.top__container-package__item.top__container-package__item--3 img {
  width: 180px;
  max-width: 180px;
  min-width: 180px;
  height: auto;
  object-fit: contain;
}

/* シーケンス内の3番目アイテム画像も強制縮小 */
.top__container-package__sequence .top__container-package__item--3 img {
  width: 180px;
  max-width: 180px;
  min-width: 180px;
  height: auto;
  object-fit: contain;
}

/* 5番目のアイテム（5-5.svg）の画像を大きく（アスペクト比を保持） */
/* より詳細なセレクタで優先度を上げる（!importantなし） */
figure.top__container-package__item.top__container-package__item--5 img {
  width: min(1000px, 90%);
  max-width: 1000px;
  height: auto;
  object-fit: contain;
}

/* シーケンス内の5番目も大判表示を維持 */
.top__container-package__sequence .top__container-package__item--5 img {
  width: min(1000px, 90%);
  max-width: 1000px;
  height: auto;
  object-fit: contain;
}

/* ===================== Container Package Row (Step 5) ===================== */
/* Step 5内の1.svg（上に配置：直下の行間はゼロに） */
.top__container-package__item--5 > .top__container-package__media:first-child {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.top__container-package__item--5 > .top__container-package__media:first-child img {
  width: min(1000px, 90%);
  max-width: 1000px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 横一列表示コンテナ（2.svg～7.svg） */
.top__container-package__row {
  width: 100%;
  max-width: min(1600px, 95%);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  flex-wrap: wrap;
}

/* 横一列表示内の各メディア（2.svg～7.svg） */
.top__container-package__row .top__container-package__media {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 横一列表示内の画像（2.svg～7.svg） */
.top__container-package__row .top__container-package__media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 時間差アニメーション用のスライドアイテム（初期状態） */
.top__container-package__slide-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* 時間差アニメーション用のスライドアイテム（表示状態） */
.top__container-package__slide-item.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* レスポンシブ: スマホでは2列表示 */
@media (max-width: 768px) {
  .top__container-package__row {
    gap: clamp(4px, 1vw, 8px);
  }
  
  .top__container-package__item--5 .top__container-package__media {
    flex: 0 0 calc(50% - clamp(4px, 1vw, 8px));
    max-width: calc(50% - clamp(4px, 1vw, 8px));
  }
}

/* ===================== Comparison Slider (Step 4) ===================== */
.top__comparison-slider {
  width: 100%;
  max-width: 800px; /* 他のアイテムとバランスを取る */
  margin: 0 auto;
  position: relative;
}

.top__comparison-slider__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0; /* 枠の角丸をなくす */
  /* 画像のアスペクト比を維持するための高さ確保はimg要素に任せる */
  box-shadow: none; /* 透明枠を無効化 */
  background: transparent; /* 背景の白さをなくす */
  --pos: 50%; /* JSで制御 */
}

/* 画像共通スタイル */
.top__comparison-slider__img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.top__comparison-slider__img img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* ドラッグ防止 */
}

/* After画像 (背景・右側) */
.top__comparison-slider__img--after {
  position: relative;
  /* 手前の画像と重ならないように、左側をクリップする */
  clip-path: inset(0 0 0 var(--pos));
}

/* Before画像 (手前・左側) */
.top__comparison-slider__img--before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* 右側をクリップする */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  z-index: 10;
}

/* スライダーハンドル (縦線とボタン) */
.top__comparison-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 4px;
  background: #fff;
  z-index: 20;
  transform: translateX(-50%);
  pointer-events: none; /* input rangeにイベントを譲る */
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* ハンドルボタン */
.top__comparison-slider__button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ハンドルボタンの矢印装飾 */
.top__comparison-slider__button::before,
.top__comparison-slider__button::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin: 0 2px;
}

.top__comparison-slider__button::before {
  border-right: 6px solid #333;
}

.top__comparison-slider__button::after {
  border-left: 6px solid #333;
}

/* Range Input (透明・操作用) */
.top__comparison-slider__range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  z-index: 30;
  cursor: col-resize; /* 横方向リサイズカーソル */
  touch-action: pan-y; /* 縦スクロールは許可 */
}

/* Focus時 */
.top__comparison-slider__range:focus + .top__comparison-slider__handle {
  background: #eee;
}

/* 画像下のキャプション装飾 */
.top__container-package__item figcaption {
  font-size: 16px;
  font-weight: 600;
  color: #1c3060;
}

/* シーケンス末尾の補足ノートラッパー */
.top__container-package__note {
  text-align: center;
  margin-bottom: clamp(8px, 1.4vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ノート内の本文テキスト（大きめの筆致） */
.top__container-package__note-text {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #0f1f2c;
  margin: 0;
}

/* 補足テキスト下線（グラデーションバー） */
.top__container-package__note-underline {
  width: clamp(160px, 30vw, 260px);
  height: 3px;
  display: block;
  border-radius: 999px;
}

/* プライマリーカラーの下線（ミント〜ティール） */
.top__container-package__note--primary .top__container-package__note-underline {
  background: linear-gradient(90deg, #006666 0%, #4AB3A8 100%);
}

/* セカンダリーカラーの下線（ブラウン〜ゴールド） */
.top__container-package__note--secondary .top__container-package__note-underline {
  background: linear-gradient(90deg, #6C3B00 0%, #D6A056 100%);
}
/* ビデオ背景のオーバーレイ（グラデーション、ブラー効果、ポインターイベント無効） */
.top__video-bg__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 8, 26, 0.65), rgba(0, 22, 42, 0.4));
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(2px);
}
/* ビデオ背景のコンテンツエリア（中央揃え、ポインターイベント無効） */
.top__video-bg__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.top__video-bg__inner {
  text-align: center;
}
/* プロダクト用ビデオ背景のコンテンツエリア（フレックスレイアウト） */
.top__video-bg--product .top__video-bg__content,
.top__video-product .top__video-bg__content {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ビデオ背景のタイトル（超大サイズ、大文字、白文字、テキストシャドウ） */
.top__video-bg__title {
  font-size: clamp(80px, 15vw, 200px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Arial', 'Helvetica', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 4;
}
.top__video-bg__lead {
  margin: 12px 0 0;
  font-size: clamp(16px, 2.5vw, 22px);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  z-index: 4;
  position: relative;
}
/* プロダクト用ビデオ背景のタイトル（マスク用） */
.top__video-bg--product .top__video-bg__title,
.top__video-product .top__video-bg__title {
  opacity: 0;
  position: relative;
  z-index: 5;
  mix-blend-mode: normal;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin: 0;
  padding: 0 clamp(16px, 3vw, 32px);
  line-height: 1;
  box-sizing: border-box;
  font-size: clamp(60px, 12vw, 180px);
  white-space: nowrap;
  overflow: visible;
}
/* プロダクト用ビデオ背景のタイトルの各文字（初期状態は非表示、フェードインアニメーション） */
.top__video-bg--product .top__video-bg__title .product-char,
.top__video-product .top__video-bg__title .product-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* プロダクト用ビデオ背景のタイトルの各文字が表示された状態（フェードイン完了） */
.top__video-bg--product .top__video-bg__title .product-char.is-visible,
.top__video-product .top__video-bg__title .product-char.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* プロダクト用ビデオ背景（背景色#F5F1EB） */
.top__video-bg--product {
  background-color: #F5F1EB;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 380px;
}

/* プロダクト用ビデオ背景セクション（top__sectionとの組み合わせ時） */
.top__video-bg--product.top__section {
  padding: 0;
  margin: 0;
  min-height: auto;
  max-width: none;
  padding-inline: 0;
  border: none;
  outline: none;
}
/* プロダクト用ビデオ背景のオーバーレイ（背景色#F5F1EB、完全表示） */
/* より詳細なセレクタで優先度を上げる（!importantなし） */
.top__video-bg.top__video-bg--product .top__video-bg__overlay,
.top__video-bg--product .top__video-bg__overlay,
.top__video-product .top__video-bg__overlay {
  opacity: 1;
  background: #F5F1EB;
}
/* プロダクト用ビデオ背景のオーバーレイ（文字部分だけ透明にして動画を表示、JavaScriptでマスク設定） */
.top__video-bg--product .top__video-bg__overlay--product,
.top__video-product .top__video-bg__overlay--product {
  background: #F5F1EB;
  mix-blend-mode: normal;
  /* JavaScriptで動的にマスクを設定 */
}
/* PRODUCTセクションのビデオ背景 */
.top__video-bg--product .top__video-bg__media,
.top__video-product .top__video-bg__media {
  width: 100%;
  height: clamp(200px, 40vh, 380px);
  position: relative;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  z-index: 1;
  border: none;
  outline: none;
}

/* PRODUCTセクションのビデオ要素（切れないようにcover表示、位置調整） */
.top__video-bg--product .top__video-bg__media video,
.top__video-product .top__video-bg__media video {
  object-fit: cover;
  object-position: center center;
}

/* WORKPLACEセクション下のビデオ背景 */
.top__video-bg--workplace .top__video-bg__media,
.top__video-workplace .top__video-bg__media {
  width: 100%;
  height: 380px;
  position: relative;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: none;
  outline: none;
}

/* WORKPLACEセクションのタイトル表示調整 */
.top__video-bg--workplace .top__video-bg__title,
.top__video-workplace .top__video-bg__title {
  opacity: 1;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  font-size: clamp(60px, 12vw, 140px);
  z-index: 10;
  line-height: 1;
}

.top__video-bg--workplace .top__video-bg__content,
.top__video-workplace .top__video-bg__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

/* 画面左に固定され、スクロール追従で現在位置を示すメニュー（固定位置、中央垂直配置） */
/* 画面左に固定され、スクロール追従で現在位置を示すドットナビ（固定位置、中央垂直配置） */
.top__menu {
  position: fixed;
  left: clamp(16px, 4vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  transition: opacity .3s ease, transform .3s ease;
}

/* ドットナビのリスト（縦方向フレックス、中央寄せ） */
.top__menu .top__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* メニューのサブリスト（インデント、縦方向フレックス、透明度0.8） */
.top__menu .top__menu-sublist {
  list-style: none;
  margin: 8px 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.8;
}

/* メニューの各項目（1.4倍行間） */
.top__menu-item {
  line-height: 1.4;
}

/* メニューのリンクをドットとして表示（テキストは視覚的に非表示） */
.top__menu-link {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #c6c6c6; /* 非アクティブ時：グレー */

  overflow: visible; /* ツールチップ表示のため visible に変更 */
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  border: none;
  transform: scale(1);
  transition: opacity .3s ease, transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  opacity: 0;
}

/* ホバー時にドットの右側にラベルテキストを表示（背景なし、参考実装に近い挙動） */
.top__menu-link::after {
  content: attr(data-label);
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  background: none;
  color: #c6c6c6; /* 非アクティブドットと同じライトグレー */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-indent: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.top__menu-link:hover,
.top__menu-link:focus-visible {
  opacity: 1;
  background-color: #555555;
}

.top__menu-link:hover::after,
.top__menu-link:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
}

/* メニューリンクがマウントされた状態（フェードイン） */
.top__menu-link.is-mounted {
  opacity: 1;
}

/* アクティブなメニューリンク（大きく光るドット） */
.top__menu-link.is-active {
  transform: scale(1.5);
  background-color: #797979; /* アクティブ時：黒 */
}
/* メニューリンクがアンマウント中（下に移動してフェードアウト） */
.top__menu-link.is-unmounting-down {
  opacity: 0;
}
/* サブメニューを持つメニュー項目のリンク（通常の太さ） */
.top__menu-item.has-sub > .top__menu-link {
  font-weight: 400;
}
/* サブメニューを持つメニュー項目のアクティブなリンク（太字） */
.top__menu-item.has-sub > .top__menu-link.is-active {
  font-weight: 600;
}
/* メニューのサブリンク（小サイズ、通常文字、初期状態は非表示） */
.top__menu-link--sub {
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: scale(1);
  background-color: #777777; /* サブリンク非アクティブ時：グレー */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  overflow: visible; /* ツールチップ表示のため visible に変更 */
}

/* サブリンクのツールチップ */
.top__menu-link--sub::after {
  content: attr(data-label);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  background: none;
  color: #000000; /* 黒色のテキスト */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-indent: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.top__menu-link--sub:hover::after,
.top__menu-link--sub:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
}
/* メニューサブリンクがマウントされた状態（透明度0.7、位置リセット） */
.top__menu-link--sub.is-mounted {
  opacity: 0.8;
}
/* アクティブなメニューサブリンク（フォントサイズ拡大、太字、完全表示） */
.top__menu-link--sub.is-active {
  opacity: 1;
  transform: scale(1.4);
  background-color: #000000; /* サブリンクアクティブ時：黒 */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.6);
}
/* メニューサブリンクがアンマウント中（下に移動してフェードアウト） */
.top__menu-link--sub.is-unmounting-down {
  opacity: 0;
}

/* メニューが非表示になった状態（フェードアウト、下に移動） */
.top__menu.top__menu--hidden {
  display: none;
}

/* フッターとの重なり時に左下のメニュー項目を順番に非表示にする（完全非表示） */
/* より詳細なセレクタで優先度を上げる（!importantなし） */
.top__menu .top__menu-list .top__menu-item.menu-item-hidden,
.top__menu-item.menu-item-hidden {
  display: none;
}

/* フッターと重なっている時にメニューバー全体を完全非表示にする */
body.top-menu-overlapping-footer .top__menu {
  display: none;
}

/* ===================== Features ===================== */
/* 特徴カードのグリッドレイアウト（3カラム、リストスタイルなし） */
.top__features-list { 
  list-style: none; 
  padding: 0; 
  margin: 0;
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 16px;
}
/* 特徴カードの各項目（白背景、角丸、ボーダー、シャドウ） */
.top__features-item {
  border: 1px solid #eee; 
  border-radius: 14px; 
  padding: 18px; 
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.03);
}
/* 特徴カードの見出し（中太字、黒色） */
.top__features-head { 
  font-size: 18px; 
  margin: 0 0 8px; 
  font-weight: 500;
  color: #111;
}
/* 特徴カードのテキスト（グレー色、1.7倍行間） */
.top__features-text { 
  margin: 0; 
  color: #444; 
  line-height: 1.7;
}

/* ===================== Showcase / Products ===================== */
/* プロダクト（ショーケース）カードのグリッド（3カラム） */
.top__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
/* プロダクトカードの各項目（白背景、角丸、ボーダー、シャドウ、グリッドレイアウト） */
.top__card {
  border: 1px solid #eee; border-radius: 14px; padding: 18px; background: #fff;
  display: grid; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.03);
}
/* プロダクトカードのタイトル */
.top__card-title { margin: 0 0 6px; font-size: 18px; }
/* プロダクトカードのテキスト（グレー色） */
.top__card-text  { margin: 0 0 10px; color: #444; }

/* ===================== News ===================== */
/* ニュース一覧と見出しのスタイル（グリッドレイアウト、左揃え、リストスタイルなし） */
.top__news-list { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  gap: 0;
  text-align: left;
  width: 100%;
  max-width: 100%;
}
/* ニュース項目（4カラムグリッド、初期状態は非表示、ビューポートに入ったときにフェードイン） */
.top__news-item { 
  display: grid; 
  grid-template-columns: 120px 120px 1fr auto; 
  gap: 16px; 
  align-items: center; 
  padding: 24px 20px; 
  border-bottom: 1px solid #000;
  background-color: transparent;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
/* ニュース項目がビューポートに入ったときに表示（フェードイン） */
.top__news-item.is-inview {
  opacity: 1;
  transform: translateY(0);
}
/* ニュース項目の奇数行（透明背景） */
.top__news-item:nth-child(odd) {
  background-color: transparent;
}
/* ニュース項目の偶数行（透明背景） */
.top__news-item:nth-child(even) {
  background-color: transparent;
}
/* ニュース項目の最後の要素（下線付き） */
.top__news-item:last-child {
  border-bottom: 1px solid #000;
}
/* ニュース項目の日付（グレー色、小サイズ、縮小不可） */
.top__news-date { 
  color: #666; 
  font-size: 0.875rem;
  flex-shrink: 0;
}
/* ニュース項目のカテゴリー（グレー色、小サイズ、緑色マーカー付き） */
.top__news-category {
  color: #666;
  font-size: 0.875rem;
  flex-shrink: 0;
  position: relative;
  padding-left: 32px;
  display: flex;
  align-items: center;
}
/* ニュース項目のカテゴリーマーカー（緑色の中黒、左側配置） */
.top__news-category::before {
  content: "・";
  color: #4caf50; /* 緑色 */
  font-size: 2rem;
  position: absolute;
  left: -4px; /* 位置を微調整 */
  line-height: 1;
  font-weight: bold;
}
/* ニュース項目の投稿タイプ（お知らせ/キャンペーン） */
.top__news-type {
  color: #666;
  font-size: 0.875rem;
  flex-shrink: 0;
  position: relative;
  padding-left: 32px;
  display: flex;
  align-items: center;
  white-space: nowrap; /* 改行しない */
}
/* ニュース項目の投稿タイプマーカー（緑色の中黒、左側配置） */
.top__news-type::before {
  content: "・";
  color: #4caf50; /* 緑色 */
  font-size: 2rem;
  position: absolute;
  left: -4px; /* 位置を微調整 */
  line-height: 1;
  font-weight: bold;
}
/* ニュース項目のリンク（太字、ホバー時に透明度変化、テキスト省略） */
.top__news-link { 
  text-decoration: none; 
  color: #333;
  font-weight: 700;
  font-size: 1.125rem;
  transition: opacity 0.2s ease;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
/* ニュース項目のリンクのホバー状態（透明度変化） */
.top__news-link:hover { 
  opacity: 0.7; 
}
/* ニュース項目の矢印アイコン（丸枠に変更、4列目に配置） */
.top__news-arrow {
  color: #666;
  font-size: 0.9rem;
  margin-left: auto;
  flex-shrink: 0;
  grid-column: 4; /* 4列目に配置 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #666;
  border-radius: 50%;
  transition: transform 0.3s ease;
  text-decoration: none;
}
/* ニュース項目のホバー時に矢印を右に移動 */
.top__news-item:hover .top__news-arrow {
  transform: translateX(5px);
}
/* ニュースの「もっと見る」リンク（中央揃え） */
.top__news-more { 
  margin-top: 32px; 
  text-align: center; 
}
/* ニュースが空の場合のメッセージ（グレー色、中央揃え） */
.top__news-empty { 
  color: #666; 
  text-align: center; 
  padding: 40px 0; 
}


/* ===================== CTA ===================== */
/* 資料DLと問い合わせを2分割で訴求（スナップスクロール対応） */
.top__cta {
  width: 100%;
  max-width: none;
  margin: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 0;
  min-height: auto;
}

/* CTAセクションは左右の余白をなくして全幅で配置（alignfull想定） */
.top__cta.top__section {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* CTAセクションのコンテナ（横並びフレックス、高さ380px固定） */
.top__cta-container {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  position: relative;
  height: 380px;
}

/* CTAセクションの各項目（中央揃え、ホバー時に拡大） */
.top__cta-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: flex-grow 0.3s ease, opacity 0.3s ease;
  padding: clamp(40px, 8vw, 80px) 0;
  height: 100%;
}

/* CTAセクションの各項目のホバー状態（透明度変化、拡大） */
.top__cta-item:hover {
  opacity: 0.9;
  flex-grow: 1.5;
}

/* CTAセクションの各項目のホバー時にアイコンのトランジションを設定 */
.top__cta-item:hover .top__cta-icon {
  transition: transform 0.3s ease;
}

/* CTAセクションの問い合わせ項目（透明背景、オーバーレイ付き） */
.top__cta-item--contact {
  background-color: transparent;
  color: #ffffff;
  position: relative;
}

/* CTAセクションの問い合わせ項目のオーバーレイ（ライトグレー背景、ポインターイベント無効） */
.top__cta-item--contact::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0 0 0 / 60%);
  z-index: 1;
  pointer-events: none;
}

/* CTAセクションの問い合わせ項目の子要素（z-index設定） */
.top__cta-item--contact > * {
  position: relative;
  z-index: 3;
}

/* CONTACTテキスト周りだけの白枠ボックス（homeページ用） */
.top__cta-text-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
  position: relative;
  z-index: 3;
}

/* CONTACTボックス内ではアイコン下の余白をなくす */
.top__cta-text-box .top__cta-icon {
  margin-bottom: 0;
}

/* 英語・日本語テキストをそれぞれ個別の白枠で囲む */
.top__cta-item .top__cta-english,
.top__cta-item .top__cta-japanese {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  width: 100%;
}

.top__cta-item .top__cta-english {
  border: 1px solid #ffffff;
}

/* CTAセクションの問い合わせ項目のテキスト（黒色） */
.top__cta-item--contact .top__cta-english {
  color: #ffffff;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
}

.top__cta-item--contact .top__cta-japanese {
  color: #ffffff;
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 400;
}

/* CTAセクションの資料DL項目（透明背景、黒文字、オーバーレイ付き） */
.top__cta-item--download {
  background-color: transparent;
  color: #ffffff;
  position: relative;
}

/* CTAセクションの資料DL項目のオーバーレイ（ライトグレー背景、ポインターイベント無効） */
.top__cta-item--download::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0 0 0 / 60%);
  z-index: 1;
  pointer-events: none;
}

/* CTAセクションの資料DL項目の子要素（z-index設定） */
.top__cta-item--download > * {
  position: relative;
  z-index: 2;
}

/* CTAセクションの資料DL項目のテキスト（黒色） */
.top__cta-item--download .top__cta-english,
.top__cta-item--download .top__cta-japanese {
  color: #ffffff;
}

/* CTAセクションのアイコン（中央揃え、ホバー時に変形） */
.top__cta-icon {
  margin-bottom: clamp(20px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* CTAセクションの問い合わせアイコン（黒色） */
.top__cta-icon--contact {
  color: #ffffff;
}

/* CTAセクションの資料DLアイコン（黒色） */
.top__cta-icon--download {
  color: #ffffff;
}

/* CTAセクションのアイコン内のSVG（レスポンシブサイズ） */
.top__cta-icon svg {
  width: clamp(40px, 6vw, 48px);
  height: clamp(40px, 6vw, 48px);
}

/* CTAセクションの英語テキスト（太字、レスポンシブフォントサイズ、中央揃え） */
.top__cta-english {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  margin-bottom: clamp(8px, 1.5vw, 12px);
  text-align: center;
}

/* CTAセクションの日本語テキスト（通常の太さ、レスポンシブフォントサイズ、中央揃え） */
.top__cta-japanese {
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 400;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .top__cta-container {
    flex-direction: column;
    height: auto;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  
  .top__cta-item {
    height: clamp(180px, 45vh, 240px);
    width: 100%;
    max-width: none; /* 1カラム時は全幅に広げる */
  }
  
  .top__ec-site {
    height: clamp(150px, 25vh, 250px);
  }
  
  .top__ec-site-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    width: calc(100% - clamp(2rem, 10vw, 4rem));
    max-width: min(90%, 360px);
  }
}

/* ===================== IO Animation (IntersectionObserver) ===================== */
/* IntersectionObserverで発火するアニメーション共通定義（初期状態は非表示、ビューポートに入ったときにフェードイン） */
.io-fadeup { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1.2s ease; }
.io-fadeup.is-inview { opacity: 1; transform: translateY(0); }

.editor-styles-wrapper .io-fadeup,
.editor-styles-wrapper .io-fadeup.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ブロックエディタ内ではスクロール連動アニメーションを無効化して常に表示する（編集時の視認性確保） */
.editor-styles-wrapper .top__news-item,
.editor-styles-wrapper .top__about-description,
.editor-styles-wrapper .top__indoor-aquaculture-description,
.editor-styles-wrapper .top__workplace-description {
  opacity: 1;
  transform: none;
}

/* ===================== ブロックエディタ用スタイル ===================== */
/* 管理画面のブロックエディタでの再現性を高める */
.editor-styles-wrapper .wp-block-group.top__hero {
  height: auto;
  min-height: auto;
}

.editor-styles-wrapper .wp-block-group.top__hero-slider {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: auto;
  height: auto;
  overflow: visible;
}

.editor-styles-wrapper .wp-block-image.top__hero-slide {
  position: relative;
  opacity: 1;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}

.editor-styles-wrapper .wp-block-image.top__hero-slide img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

.editor-styles-wrapper .top__video-bg--pinned {
  height: auto;
  margin-bottom: 48px;
  padding: clamp(24px, 4vw, 48px) 0;
}
.editor-styles-wrapper .top__video-bg--pinned .top__video-bg__media {
  position: relative;
  top: auto;
  height: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.editor-styles-wrapper .top__video-bg--inline .top__video-bg__media {
  height: 380px;
}
.editor-styles-wrapper .top__video-bg__overlay {
  background: linear-gradient(180deg, rgba(4,18,25,0.65), rgba(4,18,25,0.25));
}
.editor-styles-wrapper .top__ec-site--has-video {
  min-height: clamp(360px, 60vh, 520px);
  padding: clamp(32px, 5vw, 64px);
}
.editor-styles-wrapper .top__ec-site--has-video .top__ec-site-video,
.editor-styles-wrapper .top__ec-site--has-video .top__ec-site-overlay {
  inset: clamp(16px, 4vw, 32px);
  height: clamp(220px, 45vh, 320px);
  border-radius: 14px;
}
.editor-styles-wrapper .top__ec-site--has-video .top__ec-site-video {
  position: absolute;
  overflow: hidden;
  z-index: 1;
}
.editor-styles-wrapper .top__ec-site--has-video .top__ec-site-video video {
  height: 100%;
}
.editor-styles-wrapper .top__ec-site--has-video .top__ec-site-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}


/* ===================== Responsive ===================== */
/* 画面幅別の微調整 */
@media (max-width: 1024px) {
  .top__section,
  .top__news-container {
    padding-inline: 1rem;
  }
}

@media (max-width: 900px) {
  .top__cards { 
    grid-template-columns: 1fr; 
  }
  .top__news-item { 
    display: block;
    padding: 16px 0;
    position: relative;
  }
  /* 1行目：日付とカテゴリを横並びにする */
  .top__news-date {
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
  }
  .top__news-type {
    display: inline-block;
    padding-left: 24px;
    vertical-align: middle;
  }
  .top__news-category {
    display: inline-block;
    padding-left: 24px;
    vertical-align: middle;
  }
  /* 2行目：タイトルと矢印を同じ行に配置 */
  .top__news-link {
    display: inline-block;
    white-space: normal;
    margin-top: 8px;
    margin-right: 8px;
    vertical-align: middle;
    max-width: calc(100% - 32px); /* 矢印のスペースを確保 */
    line-height: 1.6;
  }
  /* タイトルと同じ行に矢印を配置 */
  .top__news-arrow {
    display: inline-flex;
    vertical-align: middle;
    margin-top: 8px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
  }
  
}

@media (max-width: 768px) {
  .top__section,
  .top__news-container {
    padding-inline: 1rem;
    align-items: center;
    text-align: center;
  }

  /* スマホではお知らせの矢印を非表示 */
  .top__news-arrow {
    display: none;
  }
  
  /* お知らせ空表示と同等サイズに揃える */
  .top__about-description,
  .top__about-description p {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* 閉鎖循環式室内養殖についての本文も同じ行間に */
  .top__indoor-aquaculture-description,
  .top__indoor-aquaculture-description p {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  .top__hero {
    height: 100vh;
    height: 100dvh;
  }
  
  .top__hero-inner {
    height: 100vh;
    height: 100dvh;
  }
  
  /* スマホサイズではWORKPLACEセクションのビデオ背景の高さを広くする */
  .top__video-bg--workplace .top__video-bg__media,
.top__video-workplace .top__video-bg__media {
    height: clamp(200px, 40vh, 300px);
  }
  
  /* スマホサイズではPRODUCTセクションのビデオ背景の高さを調整して切れないようにする */
  .top__video-bg--product .top__video-bg__media,
  .top__video-product .top__video-bg__media {
    height: clamp(200px, 40vh, 380px);
  }
  
  /* スマホサイズでは5番目のコンテナパッケージアイテムの上の高さを0にする */
  .top__container-package__item.top__container-package__item--5.io-fadeup.is-inview {
    margin-top: 0;
    padding-top: 0;
  }
  
  /* スマホサイズでは4番目と5番目のアイテムの間のgapを0にする */
  .top__container-package__sequence .top__container-package__item--4 + .top__container-package__item--5 {
    margin-top: calc(-1 * clamp(16px, 3vw, 28px));
  }

  /* スマホサイズで会社概要画像を中央に配置 */
  .top__about-image img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* スマホ幅で主要セクションを中央寄せにする */
@media (max-width: 768px) {
  .top__section,
  .top__news.top__section {
    align-items: center;
    text-align: center;
  }
  .top__indoor-aquaculture-container,
  .top__workplace-container,
  .top__about-inner,
  .top__cta-container,
  .top__container-package__sequence,
  .top__video-bg__content {
    align-items: center;
  }
  .top__indoor-aquaculture-description,
  .top__workplace-description,
  .top__about-description,
  .top__container-package__description,
  .top__cta-english,
  .top__cta-japanese {
    text-align: center;
  }
}

/* デスクトップ幅では各セクションを左右2カラムに切り替える */
@media (min-width: 1024px) {
  .top__about-container,
  .top__indoor-aquaculture-container,
  .top__workplace-container {
    flex-direction: row;
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
  }

  .top__about-image,
  .top__indoor-aquaculture-image,
  .top__workplace-image {
    order: 1;
    flex: 1;
  }

  .top__about-content,
  .top__indoor-aquaculture-content,
  .top__workplace-content {
    order: 2;
    flex: 1;
  }
}
.top__menu-item { line-height: 1.4; }



/* ===================== Editor Layout (Block Editor) ===================== */
/* ブロックエディタ全体のキャンバスをフロントページに近い横幅・背景色にする */
.editor-styles-wrapper {
  /* キャンバス全体を横いっぱいに広げる */
  max-width: 100%;
  margin: 0;
  padding: 0;
  /* Aboutページと同系統の背景色（about.css の #F5F1EB を採用） */
  background: #F5F1EB;
}

/* 実際のブロック配置エリアを中央に1280px程度で制御 */
.editor-styles-wrapper .block-editor-block-list__layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 2rem;
}
.top__container-package__item--compact {
  margin-top: 40px;
  min-height: auto;
  height: auto;
}

/* Hide side menu when footer is visible */
body.footer-is-visible .top__menu {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}