/* =============================================
   CSS Variables (デザイントークン)
   ============================================= */
:root {
  /* Colors */
  --color-base:         #e9f3f3; /* ライトミント（ベース背景） */
  --color-text:         #333f3f; /* メインテキスト */
  --color-primary:      #008ad5; /* ブルー（ねおくんカラー） */
  --color-primary-dark: #0077b8; /* ダークブルー（プロフィールアクセント） */
  --color-text-muted:   #576b6b; /* 補足テキスト（くすみティール） */
  --color-accent:       #f85050; /* アクセント（ダウンロードボタンなど） */
  --color-bg-beige:     #f6f6ef; /* ベージュ背景（オフホワイト） */
  --color-bg-offwhite:  #FCFCFB; /* オフホワイト背景 */
  --color-bg-teal:      #ddeeec; /* Scene カード背景（ティール） */
  --color-border:       #EEF1F1; /* 破線ボーダー */
  --color-text-weak:    #869d9d; /* フッター等の補助テキスト */
  /* Typography */
  --font-main: 'Zen Kaku Gothic New', sans-serif;

  /* Layout */
  --fv-content-width: 360px; /* SP デザイン基準幅 */
}


/* PC用アニメーションコンテナ: SPで非表示 */
.fv-pc-anim {
  display: none;
}


/* =============================================
   Reset / Base
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  font-size: 0.875rem;
  color: var(--color-text);
  background-color:  var(--color-bg-offwhite);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'palt' 1;
  font-variant-alternates: proportional-width;
}

/* ホバー画像の事前読み込みは ::before/::after で対応するため不要 */

img {
  display: block;
  max-width: 100%;
}

/* タップハイライト: ブランドカラー（--color-primary = #008ad5）の 20% */
a, button {
  -webkit-tap-highlight-color: rgba(0, 138, 213, 0.2);
}

/* スキップリンク（キーボードナビ用） */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}


/* =============================================
   FV (First View)
   高さ = コンテンツサイズ / 構成: header → kv-copy → kv-animation → title-copy → scroll-lead
   ============================================= */
.fv {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg-beige);
}


/* --- FV: ヘッダー ---
   ------------------------------------------ */
.fv-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

.fv-logo {
  width: 140px;
  height: 39px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}


/* --- FV: キービジュアルエリア ---
   title-copy・scroll-lead はそれぞれ個別に --color-base を持つ */
.fv-kv {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* コピーエリア */
.fv-copy-wrapper {
  flex-shrink: 0;
  width: 100%;
  max-width: var(--fv-content-width);
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fv-copy {
  display: block;
  width: 285px;
  max-width: 100%;
  height: auto; /* SP版(285×66)・PC版ともにアスペクト比を維持 */
  animation: fv-fade-up 0.7s ease both;
  animation-delay: 0.2s;
}


/* FV テキスト: 下からふわっと出現 */
@keyframes fv-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* KV アニメーション（横広パノラマ画像） */
.fv-animation {
  height: 260px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Lottie コンテナ: fv-animation を 100% 埋める */
#fv-lottie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* キャラクター名 + サブコピー*/
.fv-title-copy {
  flex-shrink: 0;
  width: 100%;
  background-color: var(--color-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  text-align: center;
  position: relative; /* fv-animation-img (absolute) より手前に出すため */
  z-index: 1;
}

/* ねおくん */
.fv-name {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
  width: 100%;
  animation: fv-fade-up 0.7s ease both;
  animation-delay: 0.5s;
}

/* サブコピー */
.fv-subcopy {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  white-space: nowrap;
  animation: fv-fade-up 0.7s ease both;
  animation-delay: 0.7s;
}


/* スクロールリード*/
.fv-scroll-lead {
  flex-shrink: 0;
  width: 100%;
  background-color: var(--color-base);
  padding-top: 48px;
  padding-bottom: 8px;
  display: flex;
  justify-content: center;
  position: relative; /* fv-animation-img より手前に出すため */
  z-index: 1;
  /* transition は fv-scroll-line 側に移動 */
}

/* スクロール後: ラインだけ非表示、背景色・余白は維持 */
.fv-scroll-lead.is-hidden .fv-scroll-line {
  opacity: 0;
  pointer-events: none;
}

/* 縦 1px × 48px の青いライン */
.fv-scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background-color: var(--color-primary);
  animation: fv-scroll-line-anim 2s cubic-bezier(1, 0, 0, 1) infinite;
  transition: opacity 0.4s ease;
}

@keyframes fv-scroll-line-anim {
 0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}


/* =============================================
   Section: Scene（こんなとき、ねおくん）
   ============================================= */
.scene {
  background-color: var(--color-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 40px 16px 48px;
}

/* h2 見出し共通（全セクション）
   SP: 26px Bold / #008ad5 / tracking 0.05em */
h2 {
  width: 100%;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
}

/* プロフィールカードタイトル: h2 共通スタイルを上書き */
.profile-card-title {
  font-size: 1.25rem;
  color: var(--color-text);
  text-align: center;
}

/* カードリスト */
.scene-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.scene-item {
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scene-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 締めコピー + ねおくんエリア */
.scene-end {
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.scene-end.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* カード本体 */
.scene-card {
  position: relative;
  background-color: var(--color-bg-teal); /* デフォルト: ティール（1・3枚目） */
  display: flex;
  align-items: center;
  gap: 16px;
  height: 104px;
  padding: 16px 24px;
  border-radius: 24px;
  width: 100%;
}

/* 右テール（2枚目）: ベージュ */
.scene-card-tail-right {
  background-color: var(--color-bg-beige);
}

/* バルーンテール共通
   SVG の底辺をカードの底辺より 16px 下に揃える
   z-index: -1 で吹き出しカードの背面に配置 */
.scene-card-tail-left::after,
.scene-card-tail-right::after {
  content: '';
  position: absolute;
  bottom: -16px;
  width: 48px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  z-index: -1;
}

/* 左テール: SVG 左端をカード左端に揃える */
.scene-card-tail-left::after {
  left: 0;
  background-image: url('/contents/lp/neokun/assets/image/balloon_tail_left.svg');
  background-position: left bottom;
}

/* 右テール: 反転済み SVG / カード右端に揃える */
.scene-card-tail-right::after {
  right: 0;
  background-image: url('/contents/lp/neokun/assets/image/balloon_tail_right.svg');
  background-position: right bottom;
}

/* アイコン（丸いイラストエリア）*/
.scene-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background-color: var(--color-bg-offwhite); /* デフォルト: オフホワイト（1・3枚目） */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 右テール（2枚目）アイコン: ミント */
.scene-card-tail-right .scene-icon {
  background-color: var(--color-base);
}

.scene-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* カードテキスト*/
.scene-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}

/* 画面幅 380px 以下では吹き出し内の改行を非表示 */
@media (max-width: 380px) {
  .scene-text br { display: none; }
}

/* 締めコピー + ねおくんエリア
   SP では幅 100% のシンプルな縦並び */

/* ねおくんイラスト（SP: 非表示 / PC: 表示）
   image/illust-neokun-scene.svg: ハイタッチポーズのキャラクター */
.scene-neokun {
  display: none;
}

/* 締めコピー */
.scene-footnote {
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}


/* セクション共通 padding SP: profile / place / download */
.profile,
.place,
.download {
  padding: 48px 16px;
}

/* Story: padding-top のみ / padding-bottom は白スペーサー div で代替（SP） */
/* 上部 48px（padding-top 分）だけ --color-bg-beige、以降は --color-base */
.story {
  padding-top: 0;
  padding-bottom: 0;
  background: var(--color-base);
}

/* Story 見出しラッパー: 上下 72px ・ 左右 16px */
.story-heading-wrapper {
  padding: 72px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* 雲装飾 共通 */
.story-cloud {
  position: absolute;
  pointer-events: none;
}

/* 左下の雲: 120×43px / 左からふわっと入場 */
.story-cloud-left {
  bottom: 0;
  left: -20px;
  width: 120px;
  height: 43px;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.story-cloud-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 右上の雲: 80×28px / 右からふわっと入場（scaleX(-1) で水平反転済み） */
.story-cloud-right {
  top: 30px;
  right: -20px;
  width: 80px;
  height: 28px;
  opacity: 0;
  transform: scaleX(-1) translateX(-40px); /* フリップ座標系で -40px = 画面右方向 +40px */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.story-cloud-right.is-visible {
  opacity: 1;
  transform: scaleX(-1) translateX(0);
}

.story-eyebrow {
  font-size: 1rem; /* 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-primary); /* #008ad5 */
  text-transform: uppercase;
}


/* =============================================
   Section Profile（ねおくんのプロフィール）
   ============================================= */

/* セクション wrapper */
.profile {
  background-color: var(--color-bg-beige);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* カード本体 */
.profile-card {
  background-color: var(--color-bg-offwhite);
  border-radius: 32px;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.profile-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* カードタイトル: h2 共通スタイルから color / font-size / text-align を上書き済み
   （font-weight / line-height / letter-spacing / font-feature-settings は h2 から継承）*/

/* ねおくん正面イラスト + テキスト群のラッパー
   SP: 縦並び / PC: 横並び */
.profile-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* テキスト群ラッパー（パーソナリティ・説明文・詳細）
   SP: 縦並び / PC: 縦並び */
.profile-texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* ねおくん正面イラスト */
.profile-illust {
  flex-shrink: 0;
  width: 200px;
  height: 147px;
  overflow: hidden;
}

.profile-illust-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* パーソナリティタグ（#ハッシュタグ形式） */
.profile-personality {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.profile-personality li {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-primary-dark);
  text-align: center;
  white-space: nowrap;
}

/* 自己紹介文*/
.profile-description {
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
}

/* プロフィール詳細リスト */
.profile-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 1.5px dashed var(--color-border);
}

/* 各プロフィール項目 */
.profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1.5px dashed var(--color-border);
}

/* ラベルバッジ  */
.profile-item-label {
  flex-shrink: 0;
  width: 130px;
  background-color: var(--color-bg-beige);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
}

/* 値テキスト */
.profile-item-value {
  flex: 1 0 0;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}


/* =============================================
   Section Story（ねおくんは、データの森からやってきた）
   ============================================= */

/* Story スナップルート: 4ページ分の高さでページスクロールを受け止める */
.story-snap-root {
  position: relative;
  height: 400vh;
}

/* Sticky 表示レイヤー: viewport に固定 / SP: flex-column で animation → テキストを縦積み */
.story-snap-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.6s ease;
  display: flex;
  flex-direction: column;
  padding-bottom: 32px; /* scroll hint分の高さを確保 */
}

.story-snap-sticky.is-visible {
  opacity: 1;
}

/* Layer 0: Lottie コンテナ: SP — flex item として上部を占有 / 角丸でクリップ
   preserveAspectRatio: slice で animation がコンテナを全面カバー */
#lottie-container {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  width: auto;
  aspect-ratio: 1; /* 正方形固定: 縦長ウィンドウで横長になりすぎるのを防ぐ */
  max-width: calc(100% - 48px); /* 左右最低24pxの余白を確保 */
  align-self: center;
  margin-top: 24px;
  transform: none;
  border-radius: 24px;
  overflow: hidden;
  z-index: 0;
}

/* スクロール検知ページ群: sticky の後ろに積む */
.story-snap-pages {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 各検知ページ: 100vh × 5 */
.story-snap-page {
  height: 100vh;
}

/* テキストオーバーレイ: SP — アニメーション下部に固定エリア */
.text-overlay {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 180px; /* 最大4行（1.125rem × 1.8）を収める高さ */
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* テキストアイテム: SP — 全面中央配置 / 初期状態は opacity 0 / フェード付き */
.text-item {
  position: absolute;
  top: 50%;
  width: calc(100% - 32px); /* 左右 16px ずつ */
  font-size: 1.125rem;
  line-height: 1.8;
  text-align: center;
  opacity: 0;
  color: var(--color-text);
  /* 初期状態: 下から入場待機 */
  transform: translateY(calc(-50% + 16px));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* アクティブ: 中央に入場 */
.text-item.is-active {
  opacity: 1;
  transform: translateY(-50%);
}

/* 退場: 上に抜ける */
.text-item.is-exit {
  opacity: 0;
  transform: translateY(calc(-50% - 16px));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 380px以下: Story テキストを 1rem に縮小 */
@media (max-width: 380px) {
  .text-item {
    font-size: 1rem;
  }
}

/* プログレスドット（縦積と5個 / 左余白中央に縦配置） */
.story-progress {
  position: absolute;
  left: 7px; /* lottie の left:24px 余白の中央 */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 3;
}

.story-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-text-weak);
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

.story-dot.is-active {
  opacity: 0.8;
}

/* スクロールヒント: アニメーション完了後にフェードイン / 24px の下向きシェブロン */
.story-scroll-hint {
  position: absolute;
  bottom: 12px; /* sticky コンテナの padding-bottom(64px) 内に収まる */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 3;
  pointer-events: none;
}

.story-scroll-hint.is-visible {
  opacity: 1;
}

.story-scroll-chevron {
  display: block;
  stroke: var(--color-text-weak);
  opacity: 0.8;
  animation: story-chevron-bounce 1.2s ease-in-out infinite;
}

@keyframes story-chevron-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}


/* =============================================
   Section Download（壁紙ダウンロード）
   ============================================= */

/* セクション: bg-base / py-48 / px-16 / flex-col / gap-24 / items-center */
.download {
  background-color: var(--color-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 見出しラッパー */
.download-heading-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* 壁紙アイテムコンテナ: SP縦並び / PC横並び2カラム */
.download-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

/* 各壁紙アイテム: ラベル + プレビュー + ボタン */
.download-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.download-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* SP: 2枚目を少し遅らせる */
.download-item:nth-child(2) { transition-delay: 0.15s; }

/* 壁紙ラベル: 20px Bold / muted */
.download-item-label {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* 壁紙プレビュー共通 */
.download-preview {
  background-color: #fff;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  border-radius: 12px;
}

/* SP壁紙プレビュー: 最大240px・コンテナ幅を超えない / 高さは画像に従う */
.download-preview-sp {
  width: 100%;
  max-width: 240px;
  height: auto;
}

/* PC壁紙プレビュー: 横長 16:9 / SP では横幅いっぱい（最大576px） */
.download-preview-pc {
  width: 100%;
  max-width: 576px;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* 汎用CTAボタン */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 240px;
  padding: 12px 24px;
  background-color: var(--color-accent);
  border-radius: 56px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cta-btn:hover {
  transform: scale(1.05);
}

/* ダウンロードアイコン: 20px */
.cta-btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

/* 街並みイラスト: SP では非表示 */
.download-town {
  display: none;
}

/* ボタンテキスト: 16px Bold / white / tracking 0.8px */
.cta-btn span {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}


/* =============================================
   Section Share（シェア）
   ============================================= */

/* セクション: bg-white / flex-col / gap-32 / pt-48 pb-72 / px-16 / items-center / overflow-hidden */
.share {
  background-color:  var(--color-bg-offwhite);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 48px 16px 16px;
  position: relative;
  overflow: hidden;
}

/* 誘導テキスト: 14px Medium / #333f3f / center / tracking-0.7 / max-w-320 */
.share-lead {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}

/* SNS ボタン群: flex / gap-32 / items-center */
.share-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  align-items: center;
  list-style: none;
}

/* SNS ボタン共通: 56×56px / 丸 / flex-center */
.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.share-btn:hover {
  transform: scale(1.05);
}

/* LINE / Facebook: アイコン画像がそのまま 44px */
.share-btn img {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 50%;
}

/* ねおくん笑顔: ::before=通常 / ::after=ホバー を常に描画し opacity で切り替え
   → 両画像が最初からロード済みになるためチラつきなし */
.share-neokun-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 110px;
  height: 110px;
  display: block;
  cursor: pointer;
  z-index: 0;
}

.share-neokun-wrap::before,
.share-neokun-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.share-neokun-wrap::before {
  background-image: url('/contents/lp/neokun/assets/image/neokun_smile.svg');
  opacity: 1;
}

.share-neokun-wrap::after {
  background-image: url('/contents/lp/neokun/assets/image/neokun_smile_hover.svg');
  opacity: 0;
}

.share-neokun-wrap:hover::before {
  opacity: 0;
}

.share-neokun-wrap:hover::after {
  opacity: 1;
}


/* =============================================
   Section Place（ねおくんは、いつもそばに）
   ============================================= */

/* セクション: bg-#f6f6ef / py-48 / px-16 / flex-col / gap-24 / items-center */
.place {
  background-color: var(--color-bg-beige);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  overflow-x: clip; /* clip は hidden と違いスクロールコンテナを作らない */
}

/* リード文: 16px Medium / #333f3f */
.place-lead {
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
}

/* コンテンツラッパー: flex-col / gap-24 */
.place-contents {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

/* リンクカード行ラッパー: SP縦並び / PC横並び */
.place-link-cards-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* =========================================
   リンクカードエリア
   ========================================= */
.place-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* リンクカード: bg-offwhite / p-24 / flex-col / gap-16 / relative */
.place-link-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 24px;
  background-color: var(--color-bg-offwhite);
  border-radius: 32px;
  width: 100%;
  text-decoration: none;
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.place-link-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.place-link-card:hover {
  transform: scale(1.03);
}

/* テキストラッパー: flex-col / gap-4px */
.place-link-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* タイトル: 20px Bold / primary-dark / letter-spacing 1px */
.place-link-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
}

/* カード説明文: 14px Medium / #333f3f */
.place-link-card-desc {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color-text);
  width: 100%;
}

/* サムネイル画像ラッパー: 130×260px / 角丸12px */
.place-link-card-thumb {
  position: relative;
  width: 130px;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.place-link-card-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none; /* グローバル img { max-width: 100% } を解除 */
  display: block;
  pointer-events: none;
}

/* 矢印ボタン: 絶対配置 / 右下 / ミント背景 / 左上角丸のみ */
.place-link-card-arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--color-base);
  border-radius: 16px 0 32px 0;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.place-link-card-arrow img {
  width: 24px;
  height: 24px;
  display: block;
}

/* X 公式アカウント動線 */
.place-x-follow {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background-color: var(--color-bg-offwhite);
  border-radius: 24px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.place-x-follow.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.place-x-follow:hover {
  transform: scale(1.03);
}

/* 「SNSでも待ってるね！」コールアウト: カード外に独立配置 */
.place-x-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: -4px; /* カードとの余白を詰める */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.place-x-lead.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 両脇の丸キャップ線 */
.place-x-lead-line line {
  stroke: var(--color-primary);
}

/* X アイコン円形コンテナ */
.place-circle-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.place-circle-x-logo {
  width: 25px;
  height: 26px;
  object-fit: contain;
}

/* X リンクラベル */
.place-x-link-label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary-dark);
  white-space: nowrap;
  text-decoration: none;
}


/* =============================================
   Responsive
   ============================================= */

/* SP改行: PCでは非表示 */
@media (min-width: 768px) {
  br.sp-only {
    display: none;
  }
}

/* PC改行: SPでは非表示 */
br.pc-only {
  display: none;
}
@media (min-width: 768px) {
  br.pc-only {
    display: block;
  }
}

/* 480px〜1079px / 1280px以上で表示・それ以外で非表示の改行 */
br.br-wide-range {
  display: none;
}
@media (min-width: 480px) {
  br.br-wide-range {
    display: block;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  br.br-wide-range {
    display: none;
  }
}

/* --- PC (768px〜)
   ------------------------------------------ */
@media (min-width: 768px) {

  /* =========================================
     Section Scene PC
     ========================================= */

  /* セクション */
  .scene {
    padding: 72px 120px 80px;
  }

  /* h2 見出し共通: PC 40px */
  h2 {
    font-size: 2.5rem;
  }

  /* プロフィールカードタイトル: h2 上書き */
  .profile-card-title {
    font-size: 1.75rem;
  }

  /* scene のみ中央揃え */
  .scene-heading {
    text-align: center;
  }

  /* カードリスト: gap 32px（SP/タブレット: 縦並び）*/
  .scene-list {
    gap: 32px;
    max-width: 576px;
  }

  /* 各カードアイテム: flex-col で左寄せ基本 */
  .scene-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* 2枚目だけ右寄せ */
  .scene-item:nth-child(2) {
    align-items: flex-end;
  }

  /* カード: 400px 固定幅 / 高さ auto */
  .scene-card {
    width: 400px;
    height: auto;
  }

  /* バルーンテール PC サイズ調整 */
  .scene-card-tail-left::after,
  .scene-card-tail-right::after {
    width: 60px;
    height: 40px;
  }

  /* アイコン: 84px（SP: 72px → PC: 84px）*/
  .scene-icon {
    width: 84px;
    height: 84px;
  }

  /* カードテキスト: 18px / tracking 0.9px */
  .scene-text {
    font-size: 1.125rem;
  }

  /* 締めコピー + ねおくんエリア: flex / gap 12px / max-width 576px */
  .scene-end {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 608px; /* scene-list(576px) + 32px はみ出し */
    min-height: 144px;
  }

  /* 締めコピー: flex:1 で残り幅を使って折り返し */
  .scene-footnote {
    font-size: 1.125rem;
    flex: 1;
    min-width: 0;
    width: auto;
  }

  /* ねおくんイラスト: PC のみ表示 */
  .scene-neokun {
    display: block;
    flex-shrink: 0;
    width: 260px;
    height: auto;
  }

  /* =========================================
     Section Story: PC レイアウト (768px+)
     Lottie を右半分に円形表示 / テキストを左半分に
     ========================================= */

  /* SP の flex-column レイアウトをリセット */
  .story-snap-sticky {
    display: block;
    padding-bottom: 0;
  }

  /* Story padding-bottom: PC では通常どおり / スペーサーは非表示 */
  .story {
    padding-bottom: 48px;
  }

  .story-eyebrow{
    font-size: 1.125rem;
  }
  /* Lottie コンテナ: PC — 右 75% 位置に角丸正方形でクリップ */
  #lottie-container {
    position: absolute; /* SP の relative をリセット */
    flex: none;
    align-self: auto;
    aspect-ratio: auto;
    max-width: none;
    margin: 0;
    right: auto;
    bottom: auto;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(min(50vw, 100vh) - 10vh);
    height: calc(min(50vw, 100vh) - 10vh);
    border-radius: 24px;
    overflow: hidden;
    z-index: 0;
  }

  /* テキストオーバーレイ: 左半分のみ / 左揃え中央配置 */
  .text-overlay {
    position: absolute; /* SP の relative をリセット */
    top: 0;
    left: 0;
    height: 100%;
    flex: none;
    width: 50%;
    justify-content: flex-start;
  }

  /* テキストアイテム: PC — 左半分内で左揃え */
  .text-item {
    width: 100%;
    text-align: left;
  }

  /* プログレスドット: セクション左padding（60px）の中央に縦配置 */
  .story-progress {
    left: 30px; /* 60px ÷ 2 */
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    bottom: auto;
  }

  .story-scroll-hint {
    /* テキストの下端から 48px: top:50%（テキスト中心）+ テキスト領域の半分 + 48px */
    top: calc(50% + 80px);
    bottom: auto;
    left: 25%;
    transform: translateX(-50%);
  }

  /* =========================================
     Section Profile: フォントサイズ (768px+)
     レイアウト変更は 1024px ブロックで行う
     ========================================= */

  .profile-personality li {
    font-size: 1rem;
  }

  .profile-description {
    font-size: 1.25rem;
  }

  .profile-item-label {
    width: 152px;
    padding: 6px 10px;
    font-size: 0.875rem;
  }

  .profile-item-value {
    font-size: 1rem;
  }

  /* =========================================
     Section Share: フォントサイズ / イラストサイズ (768px+)
     PC/body_S: 16px / ねおくん wrapper 160px
     ========================================= */

  /* Share: PC レイアウト（中央揃え・ボタン56px・gap32px） */
  .share {
    align-items: center;
    gap: 32px;
  }

  .share-lead {
    font-size: 1rem;
    text-align: center;
  }

  .share-buttons {
    gap: 32px;
  }

  .share-btn {
    width: 56px;
    height: 56px;
  }

  .share-btn img {
    width: 56px;
    height: 56px;
  }

  /* ねおくん笑顔: wrapper 160px 比率で拡大 */
  .share-neokun-wrap {
    width: 140px;
    height: 140px;
  }

  /* =========================================
     Section Place: フォントサイズ (768px+)
     PC/h2: 40px / body_M: 18px / body_S: 16px
     レイアウト変更は 1024px ブロックで行う
     ========================================= */

  .place-lead {
    font-size: 1.125rem;
  }

  .place-link-card-name {
    font-size: 1.375rem; /* 22px */
  }

  .place-link-card-desc {
    font-size: 1rem;
  }

  /* PC: 2枚同時に出現させる */
  .place-link-card:nth-child(2) {
    transition-delay: 0s;
  }

  /* =========================================
     Section Download: フォントサイズ (768px+))
     レイアウト変更は 1024px ブロックで行う
     ========================================= */

  /* ボタンテキスト: 18px */
  .cta-btn span {
    font-size: 1.125rem;
  }

  /* ダウンロードアイコン: 24px */
  .cta-btn-icon {
    width: 24px;
    height: 24px;
  }
}

/* --- PC (1024px〜)
   ------------------------------------------ */
@media (min-width: 1024px) {

  /* =========================================
     FV: PC レイアウト (1024px+)
     ========================================= */

  /* FV: ウィンドウ高さに追従させない（Figma固定値で実装） */
  .fv {
    height: auto;
    min-height: 0;
  }

  /* ヘッダー: 左揃え / 左右 120px */
  .fv-header {
    justify-content: flex-start;
    padding: 20px 120px;
  }

  /* SP アニメーション: PC で非表示 */
  .fv-animation {
    display: none;
  }

  /* PC 用アニメーションコンテナ: 全面絶対配置 */
  .fv-pc-anim {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* 町並み帯: Figma固定値 top=0 / h=260px */
  .fv-town-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background-color: var(--color-bg-beige);
  }

  #fv-lottie-town {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* ねおくん: Figma top=209px（FV基準）- header 79px = 130px（KV基準）- 48px上げ = 82px */
  .fv-neokun-wrap {
    position: absolute;
    left: 0;
    top: 82px;
    width: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  #fv-lottie-neokun {
    width: min(33vw, 480px);
    height: calc(min(33vw, 480px) * 230 / 280);
    min-width: 240px;
    flex-shrink: 0;
  }

  /* .fv-kv: Figma固定値
     town: h=260px, top=0 / mint開始: 220px - 24px上げ = 196px
     padding-top=196px でコンテンツをmint開始位置に合わせる
     padding-bottom=104px で scroll-lead（pt48+line48+pb8）の空間を確保
     flex: none → height:auto の親でも auto サイジングで正しく展開 */
  .fv-kv {
    flex: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0px;
    padding-top: 196px;
    padding-bottom: 104px;
    background: linear-gradient(
      to bottom,
      var(--color-bg-beige) 196px,
      var(--color-base)     196px
    );
  }

  /* コピーエリア: 右半分 */
  .fv-copy-wrapper {
    position: relative;
    z-index: 1;
    width: 50%;
    max-width: none;
    padding: 0 80px 0 40px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
  }

  /* 768px+: 中間サイズ 328px / SP版SVG(285×66)のアスペクト比で高さ自動算出 */
  .fv-copy {
    width: 328px;
    height: auto;
  }

  /* title-copy: 右半分 */
  .fv-title-copy {
    position: relative;
    z-index: 1;
    width: 50%;
    flex-shrink: 0;
    align-items: flex-start;
    padding: 0 80px 0 40px;
    text-align: left;
  }

  .fv-name {
    font-size: 3.5rem;
  }

  .fv-subcopy {
    font-size: 1rem;
  }

  /* スクロールリード: fv-kv 底辺に絶対配置 / Figma: pt=48px */
  .fv-scroll-lead {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding-top: 48px;
    padding-bottom: 8px;
    justify-content: center;
    background-color: transparent;
  }

  .fv-scroll-line {
    height: 48px;
  }

  /* =========================================
     各セクション PC
     ========================================= */

  /* ベースフォントサイズ: PC */
  body {
    font-size: 1.125rem;
  }

  /* テキストアイテム: 1024px+ フォントサイズ */
  .text-item {
    font-size: 1.5rem;
  }

  /* セクション共通 padding PC: profile / place / download */
  .profile,
  .place,
  .download {
    padding: 80px 120px;
  }

  /* Story 見出し: 上下 108px / 左右 120px */
  .story-heading-wrapper {
    padding: 108px 120px;
  }

  /* 雲装飾: Figma PC 値 */
  .story-cloud-left {
    width: 220px;
    height: 78px;
    left: -20px;
  }

  .story-cloud-right {
    width: 180px;
    height: 64px;
    right: -20px;
  }

  /* Story テキストオーバーレイ: 左端を他セクションと揃える */
  .text-overlay {
    padding-left: 120px;
  }

  /* プログレスドット: セクション左padding（120px）の中央に縦配置 */
  .story-progress {
    left: 60px; /* 120px ÷ 2 */
  }

  /* Share: 左右 120px */
  .share {
    padding-left: 120px;
    padding-right: 120px;
  }

  /* セクション: justify-center */
  .profile {
    justify-content: center;
  }

  /* カード: 幅 auto（コンテンツ幅に合わせる）/ padding 48px / items-start
     max-width: 100% でセクションの padding box からはみ出さないよう制約 */
  .profile-card {
    padding: 48px;
    width: auto;
    max-width: 100%;
    align-items: flex-start;
  }

  /* タイトル: 左揃え（フォントサイズは 768px ブロックで設定済み）*/
  .profile-card-title {
    text-align: left;
  }

  /* contents ラッパー: 横並び / gap 48px / items-center */
  .profile-contents {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    width: auto;
  }

  /* テキスト群: items-start */
  .profile-texts {
    align-items: flex-start;
    width: auto;
  }

  /* ねおくん正面イラスト: 280×206px */
  .profile-illust {
    width: 280px;
    height: 206px;
  }

  /* パーソナリティタグ: 横並び / gap 12px / 折り返し可 */
  .profile-personality {
    flex-direction: row;
    align-items: center;
    gap: 4px 12px;
    flex-wrap: wrap;
  }

  .profile-personality li {
    text-align: left;
  }

  /* 自己紹介文: 左揃え（フォントサイズは 768px ブロックで設定済み）*/
  .profile-description {
    text-align: left;
    width: auto;
  }

  /* =========================================
     Section Place: PC リンクカードレイアウト (1024px+)
     ========================================= */

  /* カード2枚を横並び */
  .place-link-cards-row {
    display: flex;
    flex-direction: row;
    gap: 32px;
    width: 100%;
  }

  .place-link-cards-row .place-link-card {
    flex: 1 1 0;
    min-width: 0;
  }

  /* X 動線: 最大幅 328px / 中央揃え */
  .place-x-follow {
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
  }

  .place-x-lead {
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
    margin-top:48px;
  }

}

/* --- PC (1280px〜) Section Scene / Place
   レイアウト切り替えのみ / フォント・アイコン・padding は 768px/1024px ブロック
   ------------------------------------------ */
@media (min-width: 1280px) {

  /* =========================================
     Section Scene: 3カラム横並び (1280px+)
     ========================================= */

  /* h2: 左揃え（Figmaに合わせ）*/
  .scene-heading {
    text-align: left;
  }

  /* カードリスト: 横並び / 等幅3カラム / max-width 解除 */
  .scene-list {
    flex-direction: row;
    max-width: none;
  }

  /* 各アイテム: 等幅で伸長 */
  .scene-item {
    flex: 1 1 0;
    min-width: 0;
    align-items: stretch;
  }

  /* 2枚目の右寄せを解除 */
  .scene-item:nth-child(2) {
    align-items: stretch;
  }

  /* カード: 列幅いっぱい */
  .scene-card {
    width: 100%;
  }

  /* PC: 全カードのテールを右側に統一
     mask-image でシェイプを使い回し、background-color でティール色を適用
     → SVG 追加なしで色を合わせる */
  .scene-card-tail-left::after {
    left: auto;
    right: 0;
    background-image: none;
    background-color: var(--color-bg-teal);
    background-position: right bottom;
    -webkit-mask-image: url('/contents/lp/neokun/assets/image/balloon_tail_right.svg');
    mask-image: url('/contents/lp/neokun/assets/image/balloon_tail_right.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right bottom;
    mask-position: right bottom;
  }

  /* Scene カードテキストの改行: 3カラム横並び時は非表示 */
  .scene-text br {
    display: none;
  }

  /* FV: 1280px以上でフルサイズに昇格 */
  .fv-copy-wrapper {
    padding: 0 120px 0 40px;
  }

  .fv-copy {
    zoom: 1.6; /* SP 等倍書き出しに対して 1.8倍表示 */
  }

  .fv-title-copy {
    padding: 0 120px 0 40px;
  }

  .fv-name {
    font-size: 5rem;
  }

  .fv-subcopy {
    font-size: 1.25rem;
  }

  .place-contents {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }

  /* links: flex:1 */
  .place-cards {
    flex: 1 0 0;
    min-width: 0;
  }
}

/* --- PC (1024px〜) Section Download
   ------------------------------------------ */
@media (min-width: 1024px) {

  /* セクション: 相対位置基準（download-town 用）/ 左寄せ */
  .download {
    position: relative;
    align-items: flex-start;
    padding-bottom: 160px;
  }

  /* 壁紙アイテムコンテナ: 両列が余白を均等に分け合う */
  .download-items {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
    justify-content: center;
  }

  /* SP列・PC列: 共に flex:1 で等分 / max-width はプレビュー画像側で制御 */
  .download-item:nth-child(1),
  .download-item:nth-child(2) {
    flex: 1 1 0;
    min-width: 0;
    transition-delay: 0s;
  }

  /* 壁紙ラベル: PC では 1.5rem / 折り返し禁止 */
  .download-item-label {
    font-size: 1.5rem;
    white-space: nowrap;
  }

  /* SP壁紙プレビュー: 列内で最大200pxに制限 / 実寸アスペクト比 9:19.5 */
  .download-preview-sp {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 9 / 19.5;
  }

  /* PC壁紙プレビュー: 列幅いっぱい（最大770px）/ 16:9 */
  .download-preview-pc {
    width: 100%;
    max-width: 770px;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* 街並みイラスト: PC のみ表示 */
  .download-town {
    display: block;
    position: absolute;
    bottom: 0;
    left: -50px;
    width: 860px;
    max-width: calc(50% + 50px);
    height: auto;
    pointer-events: none;
  }

  /* Footer: 左右 padding を 120px に */
  .footer {
    padding-left: 120px;
    padding-right: 120px;
  }
}

/* --- 画面高さが低い場合のフォールバック (max-height: 620px) --- */
@media (max-height: 620px) {
  .fv-copy-wrapper {
    padding-top: 32px;
  }

  .fv-scroll-lead {
    background-color: var(--color-base); /* 他クエリでの上書き防止 */
    padding-top: 24px;
  }

  .fv-scroll-line {
    height: 32px;
  }
}

/* SP 幅かつ低い画面高さ: ねおくん名フォントを縮小（PC幅では 768px の 4rem を維持） */
@media (max-height: 620px) and (max-width: 1023px) {
  .fv-name {
    font-size: 2.25rem;
  }
}


/* =============================================
   Footer
   ============================================= */

/* フッター: bg-white / flex-col / gap-12 / items-center / pt-32 pb-40 px-20 */
.footer {
  background-color: var(--color-bg-offwhite);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px 40px;
}

/* ロゴリンク: ブロック表示 / ホバーで薄く */
.footer-logo-link {
  display: inline-block;
  line-height: 0;
}

.footer-logo-link:hover {
  opacity: 0.75;
}

/* ロゴ: 270×27px */
.footer-logo {
  width: 270px;
  height: 27px;
  display: block;
  object-fit: contain;
}

/* コピーライト: 14px Medium / #869d9d / center / tracking-0.7 */
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-weak);
  text-align: center;
  white-space: nowrap;
}


/* =============================================
   Tablet (768px〜1023px)
   左右 padding を 120px → 60px に縮小
   ============================================= */
@media (min-width: 768px) and (max-width: 1023px) {

  .scene {
    padding: 40px 60px 80px;
  }

  /* ねおくんイラスト: タブレット幅では少し縮小 */
  .scene-neokun {
    width: 200px;
  }

  .profile,
  .place,
  .download {
    padding: 48px 60px;
  }

  /* Story 見出し: 上下 108px / 左右 60px */
  .story-heading-wrapper {
    padding: 108px 60px;
  }

  /* Story テキストオーバーレイ: 左端を他セクションと揃える */
  .text-overlay {
    padding-left: 60px;
  }

  /* Share, Footer: 左右 60px */
  .share, .footer {
    padding-left: 60px;
    padding-right: 60px;
  }

}


/* =============================================
   prefers-reduced-motion: アニメーション削減
   vestibular/視覚過敏のユーザーへの配慮
   ============================================= */
@media (prefers-reduced-motion: reduce) {

  /* FV: フェードアップ・スクロールラインを無効化 */
  .fv-copy,
  .fv-name,
  .fv-subcopy {
    animation: none;
  }

  .fv-scroll-line {
    animation: none;
  }

  /* スクロールフェードイン: 即座に表示 */
  .scene-item,
  .scene-end,
  .profile-card,
  .place-link-card,
  .place-x-lead,
  .place-x-follow,
  .download-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Story: フェードイン・ラインアニメーションを無効化 */
  .story-snap-sticky {
    opacity: 1;
    transition: none;
  }

  .story-scroll-chevron {
    animation: none;
  }

  /* text-item: スライドなしで即切り替え */
  .text-item,
  .text-item.is-active,
  .text-item.is-exit {
    transition: none;
    transform: translateY(-50%);
  }

  /* Story クラウド: アニメーションなしで即時表示 */
  .story-cloud-left {
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .story-cloud-right {
    opacity: 1;
    transform: scaleX(-1) translateX(0);
    transition: none;
  }

  /* ダウンロードボタン: スケールアニメーションを無効化 */
  .cta-btn {
    transition: none;
  }
}