@charset "UTF-8";

  /* ============================================================
  タイムライン設定
  ここの数値（秒数）だけ変えれば、それ以降の開始時刻は
  calc() で自動的に連鎖計算されます。
   ============================================================ */
:root{
  /* --- 文字の京都松ヶ崎パート --- */
  --start-delay: 1.2s;         /* 最初の文字(京)が表示され始めるまでの待機時間 */
  --seg: 0.2s;                 /* 1文字ごとの表示"開始"のずらし幅（テンポ） */
  --char-duration: 1.8s;       /* 1文字ごとのフェード時間（--segより大きく重ねてより滑らかな流れにする） */
  --char5-end: calc(var(--start-delay) + var(--seg) * 4 + var(--char-duration));    /* 崎の表示完了 */
  --text-hold: 1.2s;           /* 崎が出そろってから、文字グループが消え始めるまでの保持 */
  --text-fade-start: calc(var(--char5-end) + var(--text-hold));   /* 6.2s */
  --text-fade: 1.2s;           /* 文字グループのフェードアウト時間 */
  --text-fade-end: calc(var(--text-fade-start) + var(--text-fade)); /* 7.4s */

  /* --- 背景 → Frame08 → Frame09 → 背景+char6 --- */
  --pre-cross-hold: 1.2s;      /* 文字が消えてから、写真の入れ替えが始まるまでの保持 */
  --cross: 2.0s;                /* 背景/Frame08/Frame09 それぞれの入れ替え(クロスフェード)時間 */
  --bg-out-start:      calc(var(--text-fade-end) + var(--pre-cross-hold));  /* 8.6s  背景フェードアウト開始 */
  --frame08-out-start: calc(var(--bg-out-start) + var(--cross));            /* 10.6s Frame08フェードアウト開始 */
  --frame09-out-start: calc(var(--frame08-out-start) + var(--cross));      /* 12.6s Frame09フェードアウト開始（同時に背景・char6フェードイン開始） */
  --char6-in-end:      calc(var(--frame09-out-start) + var(--cross));      /* 14.6s char6フェードイン完了 */

  /* --- char6 → char7 → char8 → char9 --- */
  --char6-hold: 0.8s;           /* char6が100%表示されてからフェードアウトを始めるまでの保持 */
  --char6-out-start: calc(var(--char6-in-end) + var(--char6-hold));  /* 15.4s */
  --char-cross: 2.4s;            /* char6→char7、char7→char8 のクロスフェード/フェードイン時間 */
  --char8-in-start: calc(var(--char6-out-start) + var(--char-cross)); /* 17.8s */
  --char9-start:    calc(var(--char8-in-start) + var(--char-cross));  /* 20.2s */

  /* --- char9（右上起点のワイプ） --- */
  --char9-fast1: 0.1s;   /* 表示開始〜文字に触れる直前まで（見えないので一瞬） */
  --char9-slow:  4.3s;   /* 文字が見えていく間（ここをゆっくりにする） */
  --char9-fast2: 0.1s;   /* 見えきった後、残り(余白)を仕上げる（見えないので一瞬） */
  --char9-total: calc(var(--char9-fast1) + var(--char9-slow) + var(--char9-fast2)); /* 4.5s */
}

.stage-wrap{
  width:100%;
}

.hero{
  position:relative;
  width:100%;
  aspect-ratio: 1920 / 850;
  overflow:hidden;
  background:#e9dfc4;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,0.6);
}

.layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.layer img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================================
   背景：base.png
   最初は素の opacity:1 で表示 → 途中で一度フェードアウト→フェードイン
   （フェードイン用・フェードアウト用の単純な2点アニメーションを
    2つ並べて指定するだけなので、%計算が不要）
   ============================================================ */
.bg-layer{
  opacity:1;
  animation:
    bgOut var(--cross) var(--bg-out-start) forwards,
    bgIn  var(--cross) var(--frame09-out-start) forwards;
}
@keyframes bgOut{ 0%{opacity:1;} 100%{opacity:0;} }
@keyframes bgIn { 0%{opacity:0;} 100%{opacity:1;} }

/* ============================================================
   文字グループ（京都松ヶ崎）
   最初から見えている状態 → 1回だけフェードアウト
   ============================================================ */
.text-group{
  opacity:1;
  animation: textFadeOut var(--text-fade) var(--text-fade-start) forwards;
}
@keyframes textFadeOut{ 0%{opacity:1;} 100%{opacity:0;} }

/* 個々の文字レイヤー：重なりながら滑らかにフェードイン */
.char{
  opacity:0;
  animation: charFadeIn var(--char-duration) cubic-bezier(0.37, 0, 0.63, 1) forwards;
  /* --i: 0=京, 1=都, 2=松, 3=ヶ, 4=崎 */
  animation-delay: calc(var(--start-delay) + var(--seg) * var(--i));
}
@keyframes charFadeIn{
  0%   { opacity:0; }
  100% { opacity:1; }
}

/* ============================================================
   Frame08：背景と入れ替わりで現れて、Frame09と入れ替わりで消える
   ============================================================ */
.frame08-layer{
  opacity:0;
  animation:
    f08In  var(--cross) var(--bg-out-start) forwards,
    f08Out var(--cross) var(--frame08-out-start) forwards;
}
@keyframes f08In { 0%{opacity:0;} 100%{opacity:1;} }
@keyframes f08Out{ 0%{opacity:1;} 100%{opacity:0;} }

/* ============================================================
   Frame09：Frame08と入れ替わりで現れて、背景/char6と入れ替わりで消える
   ============================================================ */
.frame09-layer{
  opacity:0;
  animation:
    f09In  var(--cross) var(--frame08-out-start) forwards,
    f09Out var(--cross) var(--frame09-out-start) forwards;
}
@keyframes f09In { 0%{opacity:0;} 100%{opacity:1;} }
@keyframes f09Out{ 0%{opacity:1;} 100%{opacity:0;} }

/* ============================================================
   char6：Frame09と入れ替わりで現れ、0.8秒保持後、char7と入れ替わりで消える
   ============================================================ */
.char6-layer{
  opacity:0;
  animation:
    c6In  var(--cross) var(--frame09-out-start) forwards,
    c6Out var(--char-cross) var(--char6-out-start) forwards;
}
@keyframes c6In { 0%{opacity:0;} 100%{opacity:1;} }
@keyframes c6Out{ 0%{opacity:1;} 100%{opacity:0;} }

/* ============================================================
   char7：char6と入れ替わりでフェードインし、以降そのまま固定表示
   ============================================================ */
.char7-layer{
  opacity:0;
  animation: char7In var(--char-cross) var(--char6-out-start) forwards;
}
@keyframes char7In{ 0%{opacity:0;} 100%{opacity:1;} }

/* ============================================================
   char8：char7の上にフェードインし（char7は残る）、以降そのまま固定表示
   ============================================================ */
.char8-layer{
  opacity:0;
  animation: char8In var(--char-cross) var(--char8-in-start) forwards;
}
@keyframes char8In{ 0%{opacity:0;} 100%{opacity:1;} }

/* ============================================================
   char9：その場でふわっとフェードイン表示し、最後は固定表示で停止
   ============================================================ */
.char9-layer{
  opacity:0;
  animation: char9Reveal var(--char9-total) var(--char9-start) forwards;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); /* 終盤にかけてかなり滑らかに減速 */
}
@keyframes char9Reveal{
  0%   { opacity:0; }
  100% { opacity:1; }
}

.mv-caption {
  position: absolute;
  bottom: 5px;
  right: 30px;
  color: #fff;
  font-size: 12px;
  opacity: 0;
  animation: char9Reveal var(--char9-total) var(--char9-start) forwards;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); /* char9-layerと同じ滑らかな減速 */
}



/* ========== sp ============ */
@media screen and (max-width: 768px) {
  /* ============================================================
  タイムライン設定（PC版と同じ考え方。calc()で連鎖計算）
  Frame08/Frame09・char9のSP素材が揃ったため、PC版と全く同じ
  構成・同じ秒数になっています。
   ============================================================ */
  :root{
    /* --- 文字の京都松ヶ崎パート --- */
    --start-delay: 1.2s;       /* 最初の文字(京)が表示され始めるまでの待機時間 */
    --seg: 0.2s;               /* 1文字ごとの表示"開始"のずらし幅（テンポ） */
    --char-duration: 1.8s;     /* 1文字ごとのフェード時間（--segより大きく重ねてより滑らかな流れにする） */
    --char5-end: calc(var(--start-delay) + var(--seg) * 4 + var(--char-duration));  /* 崎の表示完了 */
    --text-hold: 1.2s;
    --text-fade-start: calc(var(--char5-end) + var(--text-hold));        /* 6.2s */
    --text-fade: 1.2s;
    --text-fade-end: calc(var(--text-fade-start) + var(--text-fade));    /* 7.4s */

    /* --- 背景 → Frame08 → Frame09 → 背景+char6 --- */
    --pre-cross-hold: 1.2s;
    --cross: 2.0s;
    --bg-out-start:      calc(var(--text-fade-end) + var(--pre-cross-hold));  /* 8.6s */
    --frame08-out-start: calc(var(--bg-out-start) + var(--cross));            /* 10.6s */
    --frame09-out-start: calc(var(--frame08-out-start) + var(--cross));       /* 12.6s */
    --char6-in-end:      calc(var(--frame09-out-start) + var(--cross));       /* 14.6s */

    /* --- char6 → char7 → char8 → char9 --- */
    --char6-hold: 0.8s;
    --char6-out-start: calc(var(--char6-in-end) + var(--char6-hold));    /* 15.4s */
    --char-cross: 2.4s;
    --char8-in-start: calc(var(--char6-out-start) + var(--char-cross));  /* 17.8s */
    --char9-start:    calc(var(--char8-in-start) + var(--char-cross));   /* 20.2s */

    /* --- char9（右上起点のワイプ） --- */
    --char9-fast1: 0.1s;
    --char9-slow:  4.3s;
    --char9-fast2: 0.1s;
    --char9-total: calc(var(--char9-fast1) + var(--char9-slow) + var(--char9-fast2)); /* 4.5s */
  }

  .stage-wrap{
    width:100%;
  }

  .hero{
    position:relative;
    width:100%;
    aspect-ratio: 1500 / 2240;
    overflow:hidden;
    background:#e9dfc4;
    box-shadow: 0 40px 100px -40px rgba(0,0,0,0.6);
  }

  .layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .layer img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* 背景：base-sp.webp。最初は固定表示、あとで一度フェードアウト→フェードインする */
  .bg-layer{
    opacity:1;
    animation:
      bgOut var(--cross) var(--bg-out-start) forwards,
      bgIn  var(--cross) var(--frame09-out-start) forwards;
  }
  @keyframes bgOut{ 0%{opacity:1;} 100%{opacity:0;} }
  @keyframes bgIn { 0%{opacity:0;} 100%{opacity:1;} }

  /* 文字グループ（京都松ヶ崎）：最初から表示 → 1回だけフェードアウト */
  .text-group{
    opacity:1;
    animation: textFadeOut var(--text-fade) var(--text-fade-start) forwards;
  }
  @keyframes textFadeOut{ 0%{opacity:1;} 100%{opacity:0;} }

  /* 個々の文字レイヤー：重なりながら滑らかにフェードイン */
  .char{
    opacity:0;
    animation: charFadeIn var(--char-duration) cubic-bezier(0.37, 0, 0.63, 1) forwards;
    /* --i: 0=京, 1=都, 2=松, 3=ヶ, 4=崎 */
    animation-delay: calc(var(--start-delay) + var(--seg) * var(--i));
  }
  @keyframes charFadeIn{
    0%   { opacity:0; }
    100% { opacity:1; }
  }

  /* Frame08：背景と入れ替わりで現れて、Frame09と入れ替わりで消える */
  .frame08-layer{
    opacity:0;
    animation:
      f08In  var(--cross) var(--bg-out-start) forwards,
      f08Out var(--cross) var(--frame08-out-start) forwards;
  }
  @keyframes f08In { 0%{opacity:0;} 100%{opacity:1;} }
  @keyframes f08Out{ 0%{opacity:1;} 100%{opacity:0;} }

  /* Frame09：Frame08と入れ替わりで現れて、背景/char6と入れ替わりで消える */
  .frame09-layer{
    opacity:0;
    animation:
      f09In  var(--cross) var(--frame08-out-start) forwards,
      f09Out var(--cross) var(--frame09-out-start) forwards;
  }
  @keyframes f09In { 0%{opacity:0;} 100%{opacity:1;} }
  @keyframes f09Out{ 0%{opacity:1;} 100%{opacity:0;} }

  /* char6：Frame09と入れ替わりで現れ、0.8秒保持後、char7と入れ替わりで消える */
  .char6-layer{
    opacity:0;
    animation:
      c6In  var(--cross) var(--frame09-out-start) forwards,
      c6Out var(--char-cross) var(--char6-out-start) forwards;
  }
  @keyframes c6In { 0%{opacity:0;} 100%{opacity:1;} }
  @keyframes c6Out{ 0%{opacity:1;} 100%{opacity:0;} }

  /* char7：char6と入れ替わりでフェードインし、以降そのまま固定表示 */
  .char7-layer{
    opacity:0;
    animation: char7In var(--char-cross) var(--char6-out-start) forwards;
  }
  @keyframes char7In{ 0%{opacity:0;} 100%{opacity:1;} }

  /* char8：char7の上にフェードインし（char7は残る）、以降そのまま固定表示 */
  .char8-layer{
    opacity:0;
    animation: char8In var(--char-cross) var(--char8-in-start) forwards;
  }
  @keyframes char8In{ 0%{opacity:0;} 100%{opacity:1;} }

  /* ============================================================
    char9：その場でふわっとフェードイン表示し、最後は固定表示で停止
     ============================================================ */
  .char9-layer{
    opacity:0;
    animation: char9Reveal var(--char9-total) var(--char9-start) forwards;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); /* 終盤にかけてかなり滑らかに減速 */
  }
  @keyframes char9Reveal{
    0%   { opacity:0; }
    100% { opacity:1; }
  }
}