@charset "utf-8";

/* ==========================================
   0. ラッパー & リセット
   ========================================== */
.gnest-lp-wrapper {
  width: 100%;
  overflow-x: hidden;
  font-family: "Noto Sans JP", "游ゴシック Medium", YuGothic, sans-serif;
  background-color: #8c1d18;
  color: #ffffff;
  line-height: 1.6;
  box-sizing: border-box;
}

.gnest-lp-wrapper *, 
.gnest-lp-wrapper *:before, 
.gnest-lp-wrapper *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gnest-lp-wrapper a {
  color: inherit;
  text-decoration: none;
}

.gnest-lp-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   1. 固定ヘッダー & ハンバーガーメニュー
   ========================================== */
.gnest-lp-wrapper .gnest-lp-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  background: transparent;
  z-index: 1000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.gnest-lp-wrapper .gnest-lp-header-logo-img {
  width: 120px; /* 現在の表示サイズに合わせて数値（例: 120px〜150pxなど）を調整してください */
  height: auto;
  display: block;
}

.gnest-lp-wrapper .gnest-lp-header.gnest-scrolled {
  background-color: #8c1d18;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.gnest-lp-wrapper .gnest-lp-header-logo {
  font-size: 24px;
  letter-spacing: 2px;
  color: #ffffff;
}

/* PC版ナビゲーション */
.gnest-lp-wrapper .gnest-lp-header-nav {
  display: flex;
  gap: 24px;
  font-size: 20px;
  letter-spacing: 1px;
}

.gnest-lp-wrapper .gnest-lp-header-nav a {
  color: #ffffff;
  text-decoration: none;
}

.gnest-lp-wrapper .gnest-lp-header-nav a:hover {
  opacity: 0.8;
}

/* ------------------------------------------
   SP版ハンバーガーボタン（初期は非表示）
   ------------------------------------------ */
.gnest-lp-wrapper .gnest-hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  cursor: pointer;
  z-index: 1100;
}

.gnest-lp-wrapper .gnest-hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ハンバーガー展開時の「✕（バツ）」に変形するアニメーション用クラス */
.gnest-lp-wrapper .gnest-hamburger-btn.is-active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.gnest-lp-wrapper .gnest-hamburger-btn.is-active span:nth-child(2) {
  opacity: 0;
}
.gnest-lp-wrapper .gnest-hamburger-btn.is-active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* ------------------------------------------
   SP版ドロワーメニュー
   ------------------------------------------ */
.gnest-lp-wrapper .gnest-sp-drawer {
  position: fixed;
  top: 0;
  right: -100%; /* 初期状態は画面外に隠す */
  width: 100%;
  height: 100vh;
  background-color: rgba(140, 29, 24, 0.95); /* ブランドカラーの赤（透過） */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.4s ease;
  z-index: 1050;
}

.gnest-lp-wrapper .gnest-sp-drawer.is-active {
  right: 0; /* アクティブ時に画面内へスライドイン */
}

.gnest-lp-wrapper .gnest-sp-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}

.gnest-lp-wrapper .gnest-sp-drawer-nav a {
  font-size: 22px;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 2px;
}


/* ==========================================
   スマホ表示切り替え（768px以下）
   ========================================== */
@media screen and (max-width: 768px) {
  /* PC版の横並びメニューを非表示にする */
  .gnest-lp-wrapper .gnest-lp-header-nav {
    display: none;
  }
  /* SP版ハンバーガーボタンを表示する */
  .gnest-lp-wrapper .gnest-hamburger-btn {
    display: flex;
  }
  .gnest-lp-wrapper .gnest-lp-header {
    padding: 0 20px;
  }
}


/* ==========================================
   2. FV コマ送りブロック
   ========================================== */
.gnest-lp-wrapper .gnest-lp-fv-scroll-container {
  width: 100%;
  height: 100vh;
  min-height: 500px;
  position: relative;
  overflow: hidden;
  background-color: #8c1d18; /* 画像読み込み前でも真っ黒にならないようブランドの赤色に設定 */
}

.gnest-lp-wrapper .gnest-lp-fv-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.gnest-lp-wrapper .gnest-lp-fv-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  z-index: 1;
}

.gnest-lp-wrapper .gnest-lp-fv-frame.gnest-active {
  opacity: 1;
  z-index: 2; /* アクティブな画像を前面にする */
}

/* オーバーレイ全体のコンテナ（配置の基準） */
.gnest-lp-wrapper .gnest-lp-fv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* マウスイベントを透過させ、スクロールやクリックを邪魔しないようにする */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100px 50px 40px; /* 必要に応じて全体の余白をここで調整できます */
  box-sizing: border-box;
  z-index: 10;
}

/* 1. 中央下ロゴ画像のラッパー & 画像サイズ指定 */
.gnest-lp-wrapper .gnest-fv-logo-wrap {
  position: absolute; /* 親要素を基準に絶対配置にする */
  bottom: 40px;       /* 画面の下部からの距離（お好みで 60px〜100px 程度に調整可能） */
  left: 50%;          /* 画面の横中央を基準にする */
  transform: translateX(-50%); /* 自身の幅の半分だけ左に戻し、完全に中央に合わせる */
  z-index: 20;        /* 動画や他の要素よりも手前に表示する */
  text-align: center;
}

.gnest-lp-wrapper .gnest-fv-logo-img {
  width: 300px; /* ここで中央下ロゴのサイズを変更 */
  height: auto;
  display: block;
}

/* 2. 中央のメインタイトルのラッパー & 画像サイズ指定 */
.gnest-lp-wrapper .gnest-fv-title-wrap {
  position: relative; /* 位置調整の基準とする */
  top: -20px;    /* 例: 下に少しずらしたい場合は top: 20px; などに変更 */
  left: 450px;   /* 左右にずらしたい場合に使用 */
}
.gnest-lp-wrapper .gnest-fv-title-img {
  max-width: 650px; /* ここで中央タイトルの最大幅を変更できます */
  width: 100%;
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.2)); /* 浮き出し用の影（不要なら削除可） */
}

/* 3. 右下のタグライン画像のラッパー & 画像サイズ指定 */
.gnest-lp-wrapper .gnest-fv-tagline-wrap {
  text-align: right;
}
.gnest-lp-wrapper .gnest-fv-tagline-img {
  width: 220px; /* ここで右下のタグライン画像のサイズを変更できます */
  height: auto;
  display: inline-block;
  margin-left: auto; /* 右寄せを確実に保つため */
}

/* スマホ表示時のサイズ・余白微調整 */
@media screen and (max-width: 768px) {
  .gnest-lp-wrapper .gnest-lp-header-nav { display: none; }
  
  /* FVコンテナ自体の高さ調整（必要に応じて変更可能。例: 100vh または特定の高さ） */
  .gnest-lp-wrapper .gnest-lp-fv-scroll-container {
    height: 100vh; /* スマホの画面いっぱいにしたい場合は100vh、高さを固定したい場合は px指定に変更可能 */
  }

  /* 動画の表示・トリミング調整 (object-fit: cover / contain など) */
  .gnest-lp-wrapper .gnest-lp-fv-video {
    object-fit: cover; /* coverは画面全体を埋める、containは動画全体を収める */
  }

  /* オーバーレイ全体の余白調整 */
  .gnest-lp-wrapper .gnest-lp-fv-overlay { 
    padding: 90px 20px 30px; 
  }

  /* 1. スマホ時のロゴのサイズと配置調整 */
  .gnest-lp-wrapper .gnest-fv-logo-wrap {
    position: absolute;
    bottom: 50px;       /* スマホ画面の下部からの距離（大きくすると上に、小さくすると下へ） */
    left: 50%;          /* 横方向の中央揃え */
    transform: translateX(-50%);
  }
  .gnest-lp-wrapper .gnest-fv-logo-img {
    width: 220px;       /* ★ここを変更してスマホでのロゴの大きさを調整（例: 120px〜180px） */
    height: auto;
  }

  /* 2. スマホ時のメインタイトルのサイズと配置調整 */
  .gnest-lp-wrapper .gnest-fv-title-wrap {
    position: relative;
    top: 0;             /* スマホでの上下の位置微調整 */
    left: 0;            /* スマホでは中央に揃えるため 0 にリセット */
    text-align: center;
  }
  .gnest-lp-wrapper .gnest-fv-title-img {
    max-width: 280px;   /* ★スマホでのメインタイトルの最大幅 */
    width: 100%;
    height: auto;
  }

  /* 3. スマホ時のタグライン（右下の要素など）のサイズ調整 */
  .gnest-lp-wrapper .gnest-fv-tagline-img {
    width: 140px;       /* ★スマホでのタグラインのサイズ */
    height: auto;
  }
}
/* ==========================================
   3. CONCEPT セクション（赤のザラザラ背景 ＋ 前面の水色ボックス）
   ========================================== */

/* セクション全体（赤のザラザラテクスチャ背景） */
.gnest-lp-wrapper .gnest-lp-concept-section {
  background-image: url('/user_data/packages/default/img/feature/gNest_lp/zarazara.png');
  background-repeat: repeat;
  background-color: #8c1d18; /* 画像読み込み前の予備カラー */
  padding: 0px 0px;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* 前面に配置するカード本体（水色背景・シャドウ付き） */
.gnest-lp-wrapper .gnest-lp-concept-card {
  background-color: #c9d3db; /* 水色の背景 */
  color: #8c1d18;
  width: 100%;
  max-width: 600px;
  padding: 180px 40px;
  box-sizing: border-box;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  position: relative;
  z-index: 3;
}

/* カード内部のグループ（前半・後半）のレイアウト調整 */
.gnest-lp-wrapper .gnest-lp-concept-group {
  margin-bottom: 50px; /* 前半と後半のグループ間の余白 */
}
.gnest-lp-wrapper .gnest-lp-concept-group:last-child {
  margin-bottom: 0;
}

/* 各パーツのデザイン調整 */
.gnest-lp-wrapper .gnest-lp-concept-title {
    font-family: "Kiwi Maru", serif;
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 50px;
  line-height: 1.6;
  text-align: center;
}

.gnest-lp-wrapper .gnest-lp-divider {
  border: none;
  border-top: 1px solid #8c1d18;
  width: 250px;
  margin: 0 auto 50px;
}

.gnest-lp-wrapper .gnest-lp-concept-text {
  font-size: 16px;
  line-height: 3;
  color: #8c1d18;
  text-align: center;
  margin-bottom: 180px;
}


/* SERIES PAGE ボタン（角丸・ピル型） */
.gnest-lp-wrapper .gnest-lp-concept-btn {
  display: block;
  width: fit-content;
  margin: 0 auto;
  border: 1px solid #8c1d18;
  padding: 14px 40px; /* 少し上下のゆとりを持たせると綺麗な丸みに*/
  color: #8c1d18;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 2px;
  background: #ffffff;
  text-decoration: none;
  text-align: center;
  border-radius: 50px; /* ここを追加：十分な大きさを指定して綺麗なカプセル型にする */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.gnest-lp-wrapper .gnest-lp-concept-btn:hover {
  background-color: #8c1d18;
  color: #ffffff;
}

.gnest-lp-wrapper .gnest-lp-concept-btn:hover {
  background-color: #8c1d18;
  color: #ffffff;
}


/* ==========================================
   スマホ（SP）表示時のサイズ・余白調整（768px以下）
   ========================================== */
@media screen and (max-width: 768px) {
  
  /* カード全体の上下左右の余白をコンパクトにする */
  .gnest-lp-wrapper .gnest-lp-concept-card {
    padding: 90px 20px; /* PC時の 180px から調整 */
  }

  /* グループ間の余白 */
  .gnest-lp-wrapper .gnest-lp-concept-group {
    margin-bottom: 40px;
  }

  /* タイトルの文字サイズと下の余白を調整 */
  .gnest-lp-wrapper .gnest-lp-concept-title {
    font-size: 20px;     /* スマホで見やすい大きさに調整（例: 20px〜22px） */
    margin-bottom: 50px;
  }

  /* 区切り線の幅と余白を調整 */
  .gnest-lp-wrapper .gnest-lp-divider {
    width: 120px;        /* スマホ画面に合わせて短くする */
    margin: 0 auto 50px;
  }

  /* 本文の文字サイズ、行間、下の余白を調整 */
  .gnest-lp-wrapper .gnest-lp-concept-text {
    font-size: 12px;     /* スマホでの読みやすさを考慮 */
    line-height: 2.6;    /* 行間が広すぎないように調整 */
    margin-bottom: 90px; /* PC時の 180px から調整 */
  }

  /* ボタンの文字サイズとパディングを調整 */
  .gnest-lp-wrapper .gnest-lp-concept-btn {
    font-size: 18px;     /* ボタン文字が大きすぎないように調整 */
    padding: 12px 30px;
  }
}

/* ==========================================
   スクロール連動アニメーション（フェードイン）
   ========================================== */
.gnest-lp-wrapper .concept-fade-item {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.gnest-lp-wrapper .concept-fade-item.is-active {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================
   4. LINEUP ブロック
   ========================================== */
.gnest-lp-wrapper .gnest-lp-lineup-section {
  background-color: #8c1d18;
  padding: 130px 0;
  text-align: center;
  overflow: hidden;
}

.gnest-lp-wrapper .gnest-lp-section-title {
  font-size: 40px;
  letter-spacing: 3px;
  margin-bottom: 5px;
  font-weight: normal;
  color: #ffffff;
}

.gnest-lp-wrapper .gnest-lp-section-divider {
  border: none;
  border-top: 1px solid #ffffff;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 80px auto;
}


.gnest-lp-wrapper .gnest-lp-lineup-carousel {
  display: flex;
  width: 100%;

  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.gnest-lp-wrapper .gnest-lp-lineup-track {
  display: flex;
  gap: 20px;
  animation: gnestLineupScroll 50s linear infinite;
}

.gnest-lp-wrapper .gnest-lp-lineup-track:hover {
  animation-play-state: paused;
}

.gnest-lp-wrapper .gnest-lp-lineup-item {
  width: 280px;
  flex-shrink: 0;
  background: #ffffff;
  padding: 15px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.gnest-lp-wrapper .gnest-lp-lineup-item:hover {
  transform: translateY(-5px);
}

.gnest-lp-wrapper .gnest-lp-lineup-item img {
  width: 100%;
  height: 250px;
  object-fit: contain;
}

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

/* ==========================================
   スマホ（SP）表示時のサイズ・余白調整（768px以下）
   ========================================== */
@media screen and (max-width: 768px) {

  /* 1. セクション全体の上下パディング調整 */
  .gnest-lp-wrapper .gnest-lp-lineup-section {
    padding: 60px 0; /* PC時の 130px からコンパクトに調整 */
  }

  /* 2. SP版 セクションタイトルのフォントサイズ調整 */
  .gnest-lp-wrapper .gnest-lp-section-title {
    font-size: 26px; /* ★ここでスマホ時の「LINEUP」タイトルの大きさを調整（例: 22px〜28px） */
    letter-spacing: 2px;
  }

  /* 3. 区切り線と下の余白調整 */
  .gnest-lp-wrapper .gnest-lp-section-divider {
    max-width: 80%;
    margin: 0 auto 40px auto; /* PC時の 80px から調整 */
  }

  /* 4. アイテム間のすき間（トラックのギャップ）調整 */
  .gnest-lp-wrapper .gnest-lp-lineup-track {
    gap: 12px; /* カード同士の間隔（お好みで 10px〜15px） */
  }

  /* 5. SP版 アイテムカード全体の幅と内側パディング調整 */
  .gnest-lp-wrapper .gnest-lp-lineup-item {
    width: 200px; /* ★ここでスマホ時のカード1枚の幅を調整（例: 180px〜220px） */
    padding: 10px;
  }

  /* 6. SP版 商品画像の高さ調整 */
  .gnest-lp-wrapper .gnest-lp-lineup-item img {
    height: 180px; /* ★ここでスマホ時の画像の高さを調整（正方形比率を保つならカード幅に近く設定） */
    object-fit: contain; /* 縦横比を崩さず枠内に全体を収める */
  }

}

/* ==========================================
   5. GALLERY セクション（画像とテキストの重なりレイアウト）
   ========================================== */
.gnest-lp-wrapper .gnest-lp-gallery-section {
  background-color: #8c1d18;
  padding: 60px 20px 200px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.gnest-lp-wrapper .gnest-lp-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: 200px; /* テキストが大きくはみ出るため、アイテム間の間隔を広めにとる */
}

/* 各ギャラリーアイテムのベース */
.gnest-lp-wrapper .gnest-lp-gallery-item {
  display: block;
  width: 100%;
  position: relative; 
  text-decoration: none;
  box-sizing: border-box;
}

/* 画像を収めるラッパー（ここで画像の幅を少し小さくして、ずらす余裕を作る） */
.gnest-lp-wrapper .gnest-gallery-img-wrap {
  width: 80%; /* 画像の幅を少し抑える */
  height: 420px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.gnest-lp-wrapper .gnest-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.gnest-lp-wrapper .gnest-lp-gallery-item:hover .gnest-gallery-img {
  transform: scale(1.03);
}


/* ==========================================
   テキストボックス共通（重ねてはみ出させる設定）
   ========================================== */
.gnest-lp-wrapper .gnest-gallery-box {
  position: absolute;
  z-index: 3;
  color: #ffffff;
  padding: 20px;
  max-width: 480px;
  box-sizing: border-box;
  /* 画像の上でも文字がつぶれないよう、強力な影（シャドウ）を付与 */
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.3);
}

/* 小見出し（サブタイトル） */
.gnest-lp-wrapper .gnest-gallery-subtitle {
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: normal;
  margin-bottom: 8px;
  opacity: 0.95;
}

/* メインテキスト */
.gnest-lp-wrapper .gnest-gallery-text {
  font-size: 12px;
  font-weight: normal;
  line-height: 1.8;
}


/* ==========================================
   ① 1枚目・3枚目：画像【左】、テキスト【右下にはみ出し】
   ========================================== */
.gnest-lp-wrapper .item-type-1 .gnest-gallery-img-wrap,
.gnest-lp-wrapper .item-type-3 .gnest-gallery-img-wrap {
  margin-left: 0; /* 画像を左側に寄せる */
}

.gnest-lp-wrapper .item-type-1 .gnest-gallery-box,
.gnest-lp-wrapper .item-type-3 .gnest-gallery-box {
  bottom: -90px; /* 画像の下フチから大きく下へはみ出させる */
  right: 0px;   /* 右端に合わせる（微調整: right: -20px; などで外側にさらに出すことも可能） */
  text-align: left;
}


/* ==========================================
   ② 2枚目：画像【右】、テキスト【左側に重なり・はみ出し】
   ========================================== */
.gnest-lp-wrapper .item-type-2 .gnest-gallery-img-wrap {
  margin-left: auto; /* 画像を右側に寄せる */
}

.gnest-lp-wrapper .item-type-2 .gnest-gallery-box {
  bottom: -90px; /* 下方向への重なり */
  left: 0px;    /* 左側に配置（微調整: left: -20px; などで左外側へはみ出させることも可能） */
  text-align: left;
}

/* ==========================================
   スマホ（SP）表示時のサイズ・配置調整（768px以下）
   ========================================== */
@media screen and (max-width: 768px) {

 /* セクション全体の余白調整 */
  .gnest-lp-wrapper .gnest-lp-gallery-section {
    padding: 40px 15px 100px;
  }

  /* アイテム間の間隔を統一 */
  .gnest-lp-wrapper .gnest-lp-gallery-grid {
    gap: 60px; /* PC時の大きな間隔をスマホ用にコンパクトにする */
  }

  /* ギャラリーアイテム全体を縦並びにする基準 */
  .gnest-lp-wrapper .gnest-lp-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 1. スマホ時の画像ラッパー（全アイテム共通で中央に配置） */
  .gnest-lp-wrapper .gnest-lp-gallery-item .gnest-gallery-img-wrap {
    width: 100% !important;
    height: 240px !important; /* スマホ時の画像の高さ */
    margin: 0 !important;
  }

  /* 2. スマホ時のテキストボックス（絶対配置を解除し、画像の真下に綺麗に配置） */
  .gnest-lp-wrapper .gnest-lp-gallery-item .gnest-gallery-box {
    position: relative !important; /* 絶対配置を解除して自然な流れにする */
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 15px !important;    /* ★ここで画像とテキストの間の余白を全アイテムで完全に統一 */
    padding: 0 10px !important;
    text-align: left !important;
    
    background-color: transparent !important;
    border-left: none !important;
  }

  /* 3. サブタイトルのサイズ調整 */
  .gnest-lp-wrapper .gnest-gallery-subtitle {
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* 4. 本文のサイズ調整 */
  .gnest-lp-wrapper .gnest-gallery-text {
    font-size: 12px;
    line-height: 1.6;
  }
}
/* ==========================================
   GALLERY セクションのスクロール連動アニメーション
   ========================================== */

/* 初期状態（隠れた状態） */
.gnest-lp-wrapper .gallery-fade-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 画面内に入って有効になった状態 */
.gnest-lp-wrapper .gallery-fade-item.is-active {
  opacity: 1;
  transform: translateY(0);
}