@charset "utf-8";
/* CSS Document */
.spacer {
  height: 0px;
}

/* ============================================================
   パララックスセクション
   - position: relative で基準を作り、
     内側の .parallax-inner を transform で動かす
============================================================ */
.story-section {
  width: 100%;
  /*padding: 220px 20px;*/
  overflow: hidden;
  position: relative;
}

/* パララックスで動く層 */
.parallax-inner {
  will-change: transform;
  /* JS で translateY を更新 */
}

/* ============================================================
   テキスト
============================================================ */
.story-text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.1em;
  color: #1f1f1f;
  line-height: 2;
  position: relative;
  font-family: "Shippori Mincho", serif;	
}
/* スマホ */
@media screen and (max-width: 749px) {
	.story-text {
  font-size: 0.9rem;	
}
}
/* 区切り線（ゴールド） 
.story-text::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: #A07850;
  margin: 32px auto 0;
  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
  opacity: 0.6;
}
*/
.story-text.show::after {
  width: 60px;
}

/* ============================================================
   1文字ずつ — 初期状態（非表示）
============================================================ */
.story-text span {
  opacity: 0;
  display: inline-block;

  transform:
    translateX(-6px)
    translateY(10px);

  filter: blur(5px);

  transition:
    opacity      1.1s ease,
    transform    1.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter       1.2s ease;

  will-change: opacity, transform, filter;
}

/* ============================================================
   表示状態
============================================================ */
.story-text.show span {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
}

/* ============================================================
   サブテキスト（任意）
============================================================ */
.story-sub {
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: #7A7060;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   1.0s ease 1.6s,
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.6s;
}

.story-text.show ~ .story-sub {
  opacity: 1;
  transform: translateY(0);
}