@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');
/* ffsteps-embed.css — minimal styles */
/* .ffsteps-embed { */
	/* width: 70%; */
	/* 画面の70%サイズ */
	/* max-width: 2000px; */
	/* でも500pxより大きくしない */
	/* margin: 0 auto; */
	/* 中央寄せ */
/* } */

.ffsteps-embed {
	position: relative;
	background: #111;
	border-radius: 12px;
	overflow: hidden
}

.ffsteps-embed .ff-phantom {
	width: 100%;
	opacity: 0;
	pointer-events: none
}

.ffsteps-embed canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%
}

.ffsteps-embed .ff-ui {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 12px;
	display: flex;
	gap: 10px;
	align-items: center;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35))
}

.ffsteps-embed .ff-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .25);
	outline: none
}

.ffsteps-embed .ff-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .35)
}

.ffsteps-embed .ff-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .35)
}

.ffsteps-embed .ff-pct {
	color: #fff;
	font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	opacity: .9;
	min-width: 42px;
	text-align: right
}

/* ===== Apple風スクロール/ピン ===== */
.ffscroll{
  /* セクション全体の高さ（スクロール距離）。data-duration があればJSで上書き */
  height: 250vh;
  position: relative;
  background-color: white;
  top: 110px;
  z-index: -2;
}

.ffpin{
  opacity: 1;
  transition: opacity 1s ease;
  position: sticky;
  top: 0;               /* 画面上端に張り付き＝「ピン留め」 */
  height: 100vh;        /* 1画面ぶんの高さで固定 */
  display: grid;
  place-items: center;  /* 中央に表示（Apple風） */
  pointer-events: none; /* 内容は下JSで操作するだけなら無効でもOK */
}

/* 埋め込みブロックの最大幅（見た目サイズはここで調整） */
.ffframe [data-ffsteps-embed]{
  /* width: min(60vw, 1600px); */
  /* 70%vwかつ最大900px */
  width: 100vw;
  margin: 0 auto;
  pointer-events: auto;     /* スライダー操作もしたければ有効化 */
}

/* ヒーローっぽく余白を詰めたい場合は UI の背景を薄く */
.ffsteps-embed .ff-ui{
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
}

/* 全画面オーバーレイ（静止区間のみ表示、JSでopacity制御） */
.ffintro-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.65);
  color:#fff; text-align:center;
  font: 700 4rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing:.08em;
  z-index: 5;
  opacity: 1;               /* 初期は見える */
  transition: opacity .6s ease;  /* フェードアウト */
  pointer-events: none;      /* スクロールを邪魔しない */
}

/* アウトロー：完了後の静止で表示するオーバーレイ */
.ffoutro-overlay{
  position:absolute; inset:0;
  display:grid; place-items:center;
  /* background:rgba(0,0,0,.45); */
  z-index:6;
  opacity:0; visibility:hidden;
  transition:opacity .6s ease, visibility .6s step-end;
  pointer-events:none;
}
.ffoutro-overlay img{
  width:min(60vw, 800px);
  height:auto;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.45));
}



.scroll_down{
  position:absolute;
  bottom:50%;
  right:50%;
  transform: translate(50%, 50%) scale(2);
  transform-origin: center center;
  animation: arrowmove 1s ease-in-out infinite;
}

.scroll_down a{
  position: absolute;
  left: -24px;
  bottom: 30px;
  color: #ffffff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  width: 24px;
  height: 24px;
  text-decoration: none;
}

.text {
  display: block;
  margin-top: 70px;
  margin-left: -14px;
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 2px;
}

.arrow {
  position: absolute;
  width: 28px;
  height: 5px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.arrow:first-child {
  animation: move 3s ease-out 1s infinite;
}

.arrow:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.arrow:before,
.arrow:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #ffffff;
}

.arrow:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.arrow:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% { opacity: 1; }
  33% { opacity: 1; transform: translateY(30px); }
  67% { opacity: 1; transform: translateY(40px); }
  100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
}


/* 合成セクションのピン要素。通常は sticky、終わったら fixed に切替 */
.ffpin.pin-fixed-after{
  opacity: 0;
  position: fixed;     /* ← これでセクションをまたいで居座る */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;          /* 後続を上に被せたいので低めに */
  pointer-events: none;/* 触らないなら無効に（必要なら外す） */
}

/* 後続のセクション（上から被せる側）の例 */
.sec02 {
  z-index: 3;
  background-color: white;
}